/* Chival — shared stylesheet. No external fonts, no CDN: works offline. */

:root {
  /* ---- brand: derived from the mark (dark rounded square, amber bolt) ---- */
  --ink: #16161f;          /* the icon's field — dark surfaces, primary text */
  --ink-2: #1e1e2a;        /* one step up — header/hero layering */
  --ink-3: #2c2c3b;        /* two steps up — dark-mode surfaces/borders */
  --ink-soft: #4b4a55;     /* secondary text, 7.8:1 on paper */
  --ink-faint: #6e6c78;    /* tertiary/muted text, 4.6:1 on paper (AA) */

  --on-dark-soft: #c7c4d0; /* nav/links on ink, 10.5:1 */
  --on-dark-faint: #9c99a6;/* least-important copy on ink, 6.4:1 */

  --bolt: #f2a24c;         /* the icon's amber — THE accent. Never as text on light bg. */
  --bolt-light: #f6b876;   /* hover tint, and as text/eyebrow ON ink */
  --bolt-strong: #b56d22;  /* AA-safe (3:1+) borders/focus rings on light bg */
  --bolt-ink: #95500f;     /* AA-safe (4.5:1+) link/text-on-light use of bolt */
  --bolt-bg: #fbebd6;      /* soft accent tint background */

  --paper: #f6f2ea;        /* warm off-white canvas */
  --surface: #ffffff;      /* card white */
  --canvas: var(--paper);  /* alias — many components already reference --canvas */

  --line: #e7e0d1;         /* decorative divider / hairline */
  --line-soft: #efe9dc;    /* subtlest divider / soft fill */
  --line-strong: #9c8f72;  /* real interactive borders — inputs, focus, selected */

  --green: #2f6b44;
  --green-bg: #e4eee1;
  --status-amber: #8a5c10;   /* status colour — distinct from brand --bolt */
  --status-amber-bg: #f3e6c9;
  --red: #a8382c;
  --red-bg: #f7e3df;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(22, 22, 31, 0.08), 0 1px 3px rgba(22, 22, 31, 0.06);
  --shadow-md: 0 4px 18px rgba(22, 22, 31, 0.10);
  --shadow-lg: 0 20px 52px rgba(22, 22, 31, 0.24);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 650;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--bolt-ink);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.wrap-narrow {
  max-width: 760px;
}

/* ---------------------------------------------------------------- header */

.site-header {
  background: var(--ink);
  color: #fff;
  padding: 18px 0;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 650;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background-color: var(--ink-2);
  background-image: url("/icon.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 0;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--on-dark-soft);
  font-size: 15px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

.site-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.site-nav a.current {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------- header: nav rebuild
 * Right side is always, at every breakpoint: Pricing, Demo (desktop/tablet),
 * the labelled Menu button, Start a workspace. Everything else lives inside
 * the Menu panel, grouped under visible headings. See web/nav.js for the
 * open/close behaviour and each page's header comment for what's static vs
 * app.js-rendered inside the panel.
 */

.site-header .wrap.nav-wrap {
  flex-wrap: wrap;
  row-gap: 10px;
}

.nav-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-quicklink {
  display: inline-flex;
  align-items: center;
  color: var(--on-dark-soft);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.nav-quicklink:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

.nav-quicklink:focus-visible {
  outline: 2px solid var(--bolt);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .nav-quicklink-demo {
    display: none;
  }
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 650;
  font-size: 15px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  cursor: pointer;
  white-space: nowrap;
}

.menu-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.menu-btn:focus-visible {
  outline: 2px solid var(--bolt);
  outline-offset: 2px;
}

.menu-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--bolt);
}

.menu-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 18px;
  flex: none;
}

.menu-icon span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: #fff;
}

.nav-cta-btn {
  white-space: nowrap;
}

.menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.menu-panel.is-open {
  opacity: 1;
  transform: translateY(0);
}

.menu-panel[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .menu-panel {
    transition: none;
  }
}

.menu-panel-nav {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}

.menu-panel-nav a,
.menu-panel .site-nav {
  display: block;
}

.menu-panel-nav a,
.menu-panel .site-nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  border-radius: 0;
  background: transparent;
}

.menu-panel-nav a:hover,
.menu-panel .site-nav a:hover {
  color: var(--ink);
  background: var(--bolt-bg);
  text-decoration: none;
}

.menu-panel-nav a.current,
.menu-panel-nav a[aria-current="page"],
.menu-panel .site-nav a.current {
  background: var(--bolt-bg);
  color: var(--bolt-ink);
}

.menu-panel-nav a:focus-visible,
.menu-panel .site-nav a:focus-visible {
  outline: 2px solid var(--bolt-strong);
  outline-offset: -2px;
}

@media (min-width: 641px) {
  .menu-panel-nav a,
  .menu-panel .site-nav a {
    min-height: 44px;
    padding: 10px 20px;
  }
}

.menu-group-title {
  margin: 0;
  padding: 16px 20px 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.menu-panel-nav > .menu-group-title:first-child {
  padding-top: 18px;
}

.menu-panel .user-menu {
  padding: 8px 20px 18px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

.menu-panel .user-menu .who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0 12px;
}

.menu-panel .user-menu .who-name {
  font-weight: 700;
  color: var(--ink);
}

.menu-panel .user-menu .who-meta {
  font-size: 13px;
  color: var(--ink-faint);
}

.menu-panel .user-menu .org-slot select.org-switch {
  display: block;
  width: 100%;
  margin: 4px 0 10px;
}

.menu-panel .user-menu .badge-demo {
  margin-bottom: 10px;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--bolt);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  text-decoration: none;
}

.btn:hover {
  background: var(--bolt-light);
  text-decoration: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-secondary {
  background: #fff;
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn-secondary:hover {
  background: var(--bolt-bg);
  border-color: var(--bolt-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: transparent;
  padding: 8px 12px;
}

.btn-ghost:hover {
  background: var(--line-soft);
  color: var(--ink);
}

.btn-on-dark {
  background: #fff;
  color: var(--ink);
}

.btn-on-dark:hover {
  background: var(--bolt-bg);
}

.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 8px 14px;
  font-size: 14px;
}

/* ---------------------------------------------------------------- landing */

.hero {
  background: radial-gradient(
      1100px 480px at 78% -12%,
      rgba(242, 162, 76, 0.32),
      transparent 60%
    ),
    var(--ink);
  color: #fff;
  padding: 88px 0 96px;
}

.hero h1 {
  font-size: clamp(34px, 5.4vw, 56px);
  max-width: 15ch;
  margin-bottom: 20px;
}

.hero p.lede {
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--on-dark-soft);
  max-width: 56ch;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bolt-light);
  margin-bottom: 16px;
}

.section {
  padding: 80px 0;
}

.section-alt {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head {
  max-width: 62ch;
  margin-bottom: 44px;
}

.section-head h2 {
  font-size: clamp(26px, 3.4vw, 34px);
}

.section-head p {
  color: var(--ink-soft);
  font-size: 17px;
  margin: 0;
}

.grid-3 {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

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

.step-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bolt-bg);
  color: var(--bolt-ink);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.step h3 {
  font-size: 19px;
}

.step p {
  color: var(--ink-soft);
  margin: 0;
}

.value {
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--bolt-strong);
}

.value h3 {
  font-size: 18px;
}

.value p {
  color: var(--ink-soft);
  margin: 0;
}

.cta-panel {
  background: var(--ink-2);
  color: #fff;
  border-radius: var(--radius);
  padding: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.cta-panel h2 {
  margin: 0 0 6px;
  font-size: 26px;
}

.cta-panel p {
  margin: 0;
  color: var(--on-dark-soft);
}

.site-footer {
  background: var(--ink);
  color: var(--on-dark-faint);
  padding: 32px 0;
  font-size: 14px;
}

.site-footer a {
  color: var(--on-dark-soft);
}

/* ---------------------------------------------------------------- forms */

.field {
  margin-bottom: 20px;
}

.field > label,
.label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

input[type="text"],
input[type="number"],
input[type="tel"],
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--bolt-strong);
  box-shadow: 0 0 0 3px rgba(242, 162, 76, 0.28);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

.hint {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 6px 0 0;
}

/* ---------------------------------------------------------------- chips, dots, badges */

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  background: var(--line);
}

.dot-high {
  background: var(--green);
}

.dot-mid {
  background: #d9a22e;
}

.dot-low {
  background: var(--red);
}

.dot-none {
  background: #c9c2ae;
}

.conf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.conf-row .label {
  margin: 0;
}

.conf-val {
  font-size: 12px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--ink-soft);
  white-space: nowrap;
}

.badge-demo {
  background: var(--status-amber-bg);
  color: var(--status-amber);
}

.chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 650;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: capitalize;
  background: var(--line-soft);
  color: var(--ink-soft);
  white-space: nowrap;
}

.chip-draft {
  background: var(--line-soft);
  color: var(--ink-soft);
}

.chip-pending_review {
  background: var(--status-amber-bg);
  color: var(--status-amber);
}

.chip-approved {
  background: var(--bolt-bg);
  color: var(--bolt-ink);
}

.chip-sent {
  background: #e8e5fb;
  color: #4a3ba8;
}

.chip-won {
  background: var(--green-bg);
  color: var(--green);
}

.chip-lost {
  background: var(--red-bg);
  color: var(--red);
}

.chip-released {
  background: var(--green-bg);
  color: var(--green);
}

.chip-cancelled {
  background: var(--red-bg);
  color: var(--red);
}

/* Lead-pipeline statuses (app/leads.py's LEAD_STATUSES) — a distinct
   vocabulary from the quote/draft chips above, no overlap. */
.chip-new {
  background: var(--status-amber-bg);
  color: var(--status-amber);
}
.chip-contacted {
  background: #e8e5fb;
  color: #4a3ba8;
}
.chip-qualified {
  background: var(--bolt-bg);
  color: var(--bolt-ink);
}
.chip-closed {
  background: var(--green-bg);
  color: var(--green);
}

/* A <select> that reads visually as a chip rather than a form control —
   used where the status itself is the editable control (app/leads.py's
   lead inbox), so the color communicates state at a glance without a
   separate, redundant badge next to it. */
.chip-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  padding: 4px 24px 4px 10px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* ---------------------------------------------------------------- messages */

.alert {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.alert-error {
  background: var(--red-bg);
  border-color: #edc3ba;
  color: #7a2a20;
}

.alert-info {
  background: var(--bolt-bg);
  border-color: #f0d3ab;
  color: #6b3d0b;
}

.alert-ok {
  background: var(--green-bg);
  border-color: #c1d9c0;
  color: #1f5334;
}

.alert p {
  margin: 0;
}

.setup-nudge-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

.alert-dismiss {
  flex: none;
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

.alert-dismiss:hover {
  opacity: 1;
}

.muted {
  color: var(--ink-faint);
}

/* Small muted metadata line (a date, a timestamp) — was defined page-locally
   on web/sendqueue.html only; promoted here since web/pilot.html and this
   round's audit-drafts/leads-inbox work both needed it too and a
   third/fourth page-local copy is how these drift. */
.meta-line {
  font-size: 12px;
  color: var(--ink-faint);
}

.empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-faint);
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.spinner-dark {
  border-color: rgba(181, 109, 34, 0.25);
  border-top-color: var(--bolt-strong);
}

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

.hidden {
  display: none !important;
}

/* ---------------------------------------------------------------- tech wizard (mobile-first) */

.tech-main {
  padding: 20px 0 64px;
}

.tech-main .wrap {
  max-width: 640px;
  padding: 0 16px;
}

.progress-steps {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.progress-steps li {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  list-style: none;
}

.progress-steps li.done {
  background: var(--bolt);
}

.progress-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-faint);
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

ul.progress-steps {
  margin: 0;
  padding: 0;
}

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

.card > h2 {
  font-size: 22px;
  margin-bottom: 4px;
}

.card > .card-sub {
  color: var(--ink-soft);
  font-size: 15px;
  margin-bottom: 22px;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.card-head h3 {
  margin: 0;
  font-size: 17px;
}

.photo-drop {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  background: var(--canvas);
  margin-bottom: 16px;
}

.photo-drop p {
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.photo-preview {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--ink);
  margin-bottom: 16px;
}

/* Manager review: nameplate photo beside the equipment fields. These classes
   were referenced by app.js's renderDetail() but never styled — an img with
   no sizing renders at native resolution and can blow out the layout. */
.eq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 640px) {
  .eq-layout { grid-template-columns: minmax(0, 1fr); }
}
.plate-col .label {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.plate-photo {
  display: block;
  width: 100%;
  max-width: 160px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--ink);
}

/* PM wear scan: suggestions the tech ticks. Unticked is the default state and
   is styled as the neutral one — a suggestion should not look pre-accepted. */
.wear-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  margin-bottom: 10px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  min-height: 56px;
}

.wear-item.is-on {
  border-color: var(--bolt);
  background: var(--bolt-bg);
}

.wear-item input {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin: 2px 0 0;
  accent-color: var(--bolt);
}

.wear-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wear-component { font-weight: 600; }

.wear-sev {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
.wear-sev-act_now { background: var(--red-bg); color: var(--red); }
.wear-sev-advise { background: var(--status-amber-bg); color: var(--status-amber); }
.wear-sev-monitor { background: var(--line-soft); color: var(--ink-soft); }

.wear-obs {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Manager side: the minted portfolio link. Full URL visible before it is
   handed over, because it is a bearer credential. */
.portal-link-input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}

/* FSM business-unit tag on a quote line. Muted by default — this is reference
   data for the office's dispatch system, not something to shout at a manager
   reading prices. UNCLASSIFIED is the exception: it means a human has to pick,
   so it is the one that draws the eye. */
.unit-tag {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.03em;
  border-radius: 5px;
  color: var(--ink-soft);
  background: var(--line-soft);
  border: 1px solid var(--line);
  white-space: nowrap;
}

.unit-labor      { color: #35506b; background: #e5edf6; border-color: #cddbea; }
.unit-equipment  { color: #4a3a6b; background: #ece7f6; border-color: #dad2ec; }
.unit-logistics  { color: #6b4a1f; background: #f6ecdd; border-color: #ead9c1; }
.unit-unclassified {
  color: var(--red);
  background: var(--red-bg);
  border-color: rgba(168, 56, 44, 0.3);
}

/* The exec summary as the customer reads it in the portal. Slightly larger and
   set off, because it is the paragraph that answers the question they actually
   opened the link with. */
.exec-summary {
  margin: 4px 0 16px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.6;
  border-left: 3px solid var(--bolt);
  background: var(--bolt-bg);
  border-radius: var(--radius-sm);
  color: var(--ink);
}

/* Sales brief (executive summary + SMS draft). */
.brief-summary { margin: 4px 0 14px; line-height: 1.55; }

.brief-rejected {
  margin: 4px 0 10px;
  padding-left: 18px;
  font-size: 12px;
  color: var(--ink-faint);
}

.brief-rejected li { margin-bottom: 3px; }

/* ================================================== THE APP SHELL
   Signed-in workspace chrome. Visually distinct from the marketing site on
   purpose: crossing from chival.ai into your workspace should feel like
   entering the product, not like another page of the brochure.

   Light surface, thin rule, dense nav — the opposite of the dark marketing
   header. No "Pricing", no "Demo", no "Start a workspace". */

.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.app-header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 56px;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.app-brand:hover { text-decoration: none; }
.app-brand .brand-mark { width: 24px; height: 24px; border-radius: 7px; }

/* ---- primary nav */
.app-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.app-nav::-webkit-scrollbar { display: none; }

.app-nav a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-soft);
}

.app-nav a:hover {
  color: var(--ink);
  background: var(--line-soft);
  text-decoration: none;
}

/* The current screen is stated plainly rather than with a subtle tint —
   someone deep in a quote should never have to hunt for where they are. */
.app-nav a.current {
  color: var(--ink);
  background: var(--bolt-bg);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--bolt);
}

/* ---- account cluster */
.app-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin-left: auto;
}

.app-header .user-menu {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-header .who {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: right;
}

.app-header .who-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.app-header .who-meta { font-size: 11.5px; color: var(--ink-faint); }

.app-header .org-switch {
  height: 32px;
  max-width: 170px;
  padding: 0 8px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.app-header .btn-ghost {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 8px;
}

/* ---- mobile */
.app-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 34px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
}

.app-nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: var(--ink-soft);
}

@media (max-width: 860px) {
  .app-header-inner { height: 52px; padding: 0 16px; gap: 12px; }
  .app-nav-toggle { display: flex; }
  .app-header .who { display: none; }

  /* Nav drops below the bar rather than compressing into unreadable stubs.
     A tech on a phone needs a tappable target, not a truncated word. */
  .app-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 52px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    overflow: visible;
  }

  .app-nav:not(.is-open) { display: none; }
  .app-nav a { height: 46px; padding: 0 14px; font-size: 15px; border-radius: 9px; }
  .app-nav a.current { box-shadow: none; }
}

/* ---- OAuth provider button (Google). Neutral, not branded-loud: it sits
   above the email form as an equal option, not a hero CTA. */
.oauth-block { margin-bottom: 4px; }

.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  font: inherit;
  font-size: 15px;
  font-weight: 550;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.oauth-btn:hover:not(:disabled) { background: var(--line-soft); }
.oauth-btn:disabled { opacity: 0.65; cursor: default; }

.oauth-btn:focus-visible {
  outline: 2px solid var(--bolt-strong);
  outline-offset: 2px;
}

.oauth-icon { width: 18px; height: 18px; flex: none; }

.oauth-divider {
  position: relative;
  margin: 18px 0 4px;
  text-align: center;
}

.oauth-divider::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--line);
}

.oauth-divider span {
  position: relative;
  padding: 0 12px;
  background: var(--surface);
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* Suppress the sign-in/sign-up flash.
   These pages resolve the session in JS. An already-signed-in user hitting
   /login.html or /onboarding.html is redirected to their dashboard — but the
   form paints first, so they see a login screen blink at them and reasonably
   wonder whether they just got logged out.

   `auth-resolving` on <body> hides the card until the session check finishes.
   The animation is the safety net: if JS dies or never resolves, the content
   reveals itself after 2s rather than leaving a permanently blank page. */
body.auth-resolving .auth-centre-inner {
  visibility: hidden;
  animation: auth-reveal 0s linear 2s forwards;
}

@keyframes auth-reveal { to { visibility: visible; } }

/* ============================================ AUTH PAGES (login / sign-up)
   One centred card, nothing else. No hero image, no marketing column: someone
   on this page has already decided to sign in, and every extra element is
   another thing between them and the password field.

   These classes previously appeared in the HTML but were never defined in any
   stylesheet, so both pages rendered on base styles alone. */

.auth-centre {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--paper);
}

.auth-centre-inner {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Brand sits above the card, quiet — an anchor, not a billboard. */
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.auth-brand:hover { text-decoration: none; }

.auth-panel { width: 100%; }

.auth-card {
  width: 100%;
  padding: 36px 32px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
}

.auth-card h1,
.auth-card h1,
.auth-card h2 {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.auth-card .card-sub {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ---- fields: same metrics as the sign-in gate, so the two never look like
   two different products. */
.auth-card .field { margin-bottom: 14px; }

.auth-card .field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 550;
  color: var(--ink-soft);
}

.auth-card .field input,
.auth-card .field select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.auth-card .field input:focus,
.auth-card .field select:focus {
  outline: none;
  border-color: var(--bolt-strong);
  box-shadow: 0 0 0 3px rgba(242, 162, 76, 0.24);
}

.auth-card .field .hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-faint);
}

/* ---- the one obvious action */
.auth-card .btn-block {
  width: 100%;
  height: 46px;
  margin-top: 18px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 11px;
}

.auth-card .btn-block + .btn-block { margin-top: 9px; }

/* ---- secondary links, deliberately quiet */
.auth-alt {
  margin: 16px 0 0;
  font-size: 13.5px;
  text-align: center;
  color: var(--ink-faint);
}

.auth-alt a { font-weight: 550; }

.auth-card > .hint {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-faint);
}

.auth-card .alert { margin-bottom: 16px; }

/* Multi-step sign-up: the progress line, if the markup has one. */
.auth-card .steps {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}

@media (max-width: 460px) {
  .auth-centre { padding: 0; align-items: stretch; }
  .auth-centre-inner { max-width: none; }
  .auth-brand { margin: 32px 0 18px; }
  .auth-card {
    min-height: 100%;
    padding: 28px 22px 26px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ======================================================== THE SIGN-IN GATE
   Centred modal shown over any gated page. Restrained on purpose: one card,
   one column, one obvious action. Everything secondary is quiet. */

.gate-locked { overflow: hidden; }

/* The page behind is blurred and dimmed rather than removed, so the visitor
   can see they landed somewhere real — but nothing on it is legible. */
.gate-blurred {
  filter: blur(7px) saturate(0.75);
  pointer-events: none;
  user-select: none;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(22, 22, 31, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: gate-fade 0.22s ease-out;
}

.auth-gate-card {
  width: 100%;
  max-width: 408px;
  margin: auto;
  padding: 40px 36px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  animation: gate-rise 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes gate-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gate-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-gate, .auth-gate-card { animation: none; }
}

/* ---- brand lockup */
.gate-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 22px;
}

.gate-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--bolt);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.gate-wordmark {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---- copy */
.gate-title {
  margin: 0 0 6px;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--ink);
}

.gate-sub {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-faint);
}

.gate-form .gate-sub { text-align: left; margin-bottom: 18px; }

/* ---- fields */
.gate-field { margin-bottom: 14px; }

.gate-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 550;
  color: var(--ink-soft);
}

.gate-field input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.gate-field input::placeholder { color: var(--ink-faint); }

.gate-field input:focus {
  outline: none;
  border-color: var(--bolt-strong);
  box-shadow: 0 0 0 3px rgba(242, 162, 76, 0.24);
}

/* ---- buttons */
.gate-btn {
  display: block;
  width: 100%;
  height: 46px;
  margin-top: 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--bolt);
  border: 1px solid var(--bolt);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.14s ease, transform 0.06s ease;
}

.gate-btn:hover:not(:disabled) { background: var(--bolt-light); }
.gate-btn:active:not(:disabled) { transform: translateY(1px); }
.gate-btn:disabled { opacity: 0.6; cursor: default; }

.gate-btn:focus-visible {
  outline: 2px solid var(--bolt-strong);
  outline-offset: 2px;
}

.gate-btn-quiet {
  margin-top: 9px;
  color: var(--ink-soft);
  background: transparent;
  border-color: var(--line-strong);
}

.gate-btn-quiet:hover:not(:disabled) { background: var(--line-soft); }

/* ---- links */
.gate-alt {
  margin: 16px 0 0;
  font-size: 13.5px;
  text-align: center;
  color: var(--ink-faint);
}

.gate-alt-faint { margin-top: 8px; font-size: 13px; }

.gate-link {
  padding: 0;
  font: inherit;
  color: var(--bolt-ink);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-weight: 550;
}

.gate-link:hover { text-decoration: underline; }

.gate-link-quiet { color: var(--ink-faint); font-weight: 400; }
.gate-link-quiet:hover { color: var(--ink-soft); }

.gate-link:focus-visible {
  outline: 2px solid var(--bolt-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- footer */
.gate-footer { margin-top: 26px; }

.gate-divider {
  height: 1px;
  margin-bottom: 4px;
  background: var(--line);
}

/* ---- alerts */
.gate-alert {
  margin: 0 0 16px;
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.45;
  border-radius: 10px;
}

.gate-alert p { margin: 0; }

.gate-alert-error {
  color: var(--red);
  background: var(--red-bg);
  border: 1px solid rgba(168, 56, 44, 0.22);
}

.gate-alert-ok {
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid rgba(47, 107, 68, 0.22);
}

@media (max-width: 460px) {
  .auth-gate { padding: 0; }
  .auth-gate-card {
    max-width: none;
    min-height: 100%;
    padding: 40px 24px 32px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Homepage "try your own photo" widget. */
.try-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--surface);
}

.try-drop {
  border: 2px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 32px 20px;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.try-drop.is-over {
  border-color: var(--brand, #E08A3C);
  background: rgba(224, 138, 60, 0.06);
}

.try-drop-title { font-weight: 600; margin: 0 0 6px; }
.try-drop .hint { margin: 8px 0; }

.try-stage {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 18px;
}

@media (max-width: 640px) {
  .try-stage { grid-template-columns: minmax(0, 1fr); }
}

.try-thumb {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.try-fields { display: grid; gap: 2px; }

.try-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
}

.try-field:nth-child(odd) { background: rgba(127, 127, 127, 0.05); }

/* Uncertain fields are shaded rather than hidden. Showing the model hedging is
   what makes the confident rows believable. */
.try-field-low {
  background: rgba(224, 138, 60, 0.14) !important;
  box-shadow: inset 3px 0 0 var(--brand, #E08A3C);
}

.try-field-label { font-size: 13px; color: var(--muted); }
.try-field-value { font-weight: 600; word-break: break-word; }
.try-field-conf {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.try-cta { margin-top: 16px; }
.try-privacy { margin-top: 12px; }

/* Warranty prompt in the capture wizard. Amber, not red: this is "make a phone
   call", not "something is broken". */
.warranty-alert {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(224, 138, 60, 0.45);
  border-left: 4px solid var(--brand, #E08A3C);
  border-radius: var(--radius-sm);
  background: rgba(224, 138, 60, 0.08);
}

.warranty-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-weight: 600;
}

.warranty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand, #E08A3C);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.warranty-line { margin: 0 0 6px; }
.warranty-recorded { margin: 0 0 6px; font-weight: 600; }
.warranty-next { margin: 8px 0 0; font-weight: 600; }

.warranty-caveats {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--muted);
}

.warranty-caveats li { margin-bottom: 4px; }

/* First-run "see it work" card. Deliberately more inviting than a plain
   panel — this is the moment that decides whether a brand-new signup comes
   back tomorrow. */
.first-run-card {
  border: 1px solid var(--bolt-strong);
  background: linear-gradient(180deg, var(--bolt-bg) 0%, var(--surface) 100%);
}

.first-run-card h2 { margin-bottom: 6px; }
.first-run-card .card-sub { max-width: 60ch; }

.first-run-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 10px;
}

.first-run-actions .btn { white-space: normal; text-align: left; }

/* Missed-revenue audit panel. */
.audit-metrics { margin-bottom: 12px; }
.audit-list { margin: 8px 0 0; padding-left: 18px; }
.audit-list li { margin-bottom: 6px; }

.audit-caveats {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--muted);
}

.audit-caveats li { margin-bottom: 4px; }

.audit-component-table {
  width: 100%;
  margin: 8px 0 14px;
  border-collapse: collapse;
  font-size: 13px;
}
.audit-component-table th, .audit-component-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.audit-component-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  font-weight: 600;
}
.audit-component-table td:not(:first-child) { text-align: right; }
.audit-component-table th:not(:first-child) { text-align: right; }

.audit-draft-text {
  width: 100%;
  margin: 8px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}

.audit-drafts-list { display: flex; flex-direction: column; gap: 2px; }

.audit-draft-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}

.audit-draft-subject { flex: 1 1 auto; min-width: 120px; }

.audit-draft-actions { display: flex; gap: 4px; margin-left: auto; }

.audit-draft-detail { padding: 8px 0; }

/* Attribution badge on the customer-facing portal. Quiet on purpose — it sits
   under the contractor's own footer note and must read as a maker's mark, not
   as a second party bidding on the job. */
.powered-by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

.powered-by strong { font-weight: 600; color: var(--ink); }

.powered-by-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--brand, #E08A3C);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.powered-by-sep { opacity: 0.5; }
.powered-by-pitch { opacity: 0.85; }

.powered-by a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.powered-by a:hover { color: var(--ink); }

/* Share-with-customer modal. The QR sits on a forced white plate regardless of
   theme — scanners need the light-module-on-light-background contrast the spec
   assumes, and a dark-mode inversion is a QR that will not read. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 10, 16, 0.62);
}

.modal-card {
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.modal-head h2 { margin: 0; font-size: 17px; }

.modal-close {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

.modal-close:hover { color: var(--ink); }

.modal-body { padding: 20px; }

.nps-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 14px 0 4px;
}

.nps-score {
  flex: 1 1 auto;
  min-width: 28px;
  padding: 8px 0;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.nps-score:hover { border-color: var(--blue-500); }

.nps-score.selected {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: #fff;
}

.nps-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 16px;
}

.nps-comment {
  width: 100%;
  resize: vertical;
  margin-bottom: 14px;
}

.share-for { font-weight: 600; margin: 0 0 12px; }

.share-qr {
  display: flex;
  justify-content: center;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.share-qr img { width: 200px; height: 200px; display: block; }

.share-actions { display: flex; gap: 8px; margin-bottom: 12px; }

/* Demo scenario picker on the capture screen. Deliberately quiet — it is a
   pitch and training affordance, not part of a real field visit. */
.demo-loader {
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--surface-2, var(--surface));
}

.demo-loader-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}

.demo-loader-row { display: flex; gap: 8px; align-items: center; }
.demo-loader-row select { flex: 1 1 auto; min-width: 0; }
.demo-loader .hint { margin: 8px 0 0; }

/* Portfolio portal: the customer-facing option picker. A property manager is
   choosing between real dollar figures, often on a phone between buildings —
   the selected option has to be unmistakable, not a subtle border tint. */
.portal-quote { margin-bottom: 20px; }

.portal-tiers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
}

@media (min-width: 860px) {
  .portal-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.portal-tier {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  min-height: 56px;
}

.portal-tier.is-chosen {
  border-color: var(--bolt);
  background: var(--bolt-bg);
}

.portal-tier input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--bolt);
}

.portal-tier-body { min-width: 0; }

.portal-tier-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.portal-tier-title { font-weight: 600; margin-top: 2px; }

.portal-tier-price {
  font-size: 22px;
  font-weight: 700;
  margin: 6px 0;
}

.portal-tier-desc {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}

/* Multi-photo nameplate: the shots that get read together as one plate. */
.nameplate-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.nameplate-thumb {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--line);
  flex-shrink: 0;
}
.nameplate-thumb.is-primary {
  border-color: var(--bolt);
}
.nameplate-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nameplate-thumb-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(22, 22, 31, 0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
  padding: 2px 0;
}
.nameplate-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(22, 22, 31, 0.78);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

/* Voice dictation control. Hidden entirely when the browser has no Web Speech
   API — a dead button is worse than the keyboard-mic hint it replaces. */
.dictate-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.dictate-row .hint { margin: 0; }
#dictate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
}
@media (min-width: 641px) {
  #dictate-btn { min-height: 44px; }
}
.dictate-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
}
#dictate-btn.is-listening {
  border-color: var(--red);
  color: var(--red);
}
#dictate-btn.is-listening .dictate-dot {
  background: var(--red);
  animation: dictate-pulse 1.2s ease-in-out infinite;
}
@keyframes dictate-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  #dictate-btn.is-listening .dictate-dot { animation: none; }
}

/* Tech wizard: job-site logistics toggles. Segmented, glove-sized, no hover
   dependency — a tech taps one of three with a gloved thumb on a roof. */
.logi-group {
  margin-bottom: 16px;
}

.logi-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.logi-opts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.logi-opt {
  flex: 1 1 30%;
  min-width: 96px;
  min-height: 56px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.logi-opt.is-on {
  border-color: var(--bolt);
  background: var(--bolt-bg);
  color: var(--bolt-ink);
}

@media (min-width: 641px) {
  .logi-opt { min-height: 44px; }
}

/* Tech wizard: on-site evidence photos, findings step. */
.finding-photo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.finding-photo-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.finding-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.finding-photo-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(22, 22, 31, 0.75);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.wizard-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

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

.review-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.review-list li {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
}

.review-list li span:first-child {
  color: var(--ink-faint);
  flex: none;
}

.review-list li span:last-child {
  text-align: right;
  word-break: break-word;
}

.tier-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.tier-summary strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.tier-name {
  text-transform: capitalize;
  font-weight: 600;
}

.success-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-bg);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 16px;
}

.quote-id {
  font-family: var(--mono);
  font-size: 15px;
  background: var(--line-soft);
  padding: 3px 8px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------- dashboard (desktop) */

.dash-main {
  padding: 28px 0 80px;
}

.dash-main .wrap {
  max-width: 1400px;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.page-head h1 {
  font-size: 28px;
  margin: 0;
}

.page-head p {
  margin: 4px 0 0;
  color: var(--ink-soft);
}

.metrics {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 24px;
}

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

.metric .label {
  margin-bottom: 4px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.metric .value {
  font-size: 28px;
  font-weight: 680;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.metric-wide {
  grid-column: span 2;
}

.bar {
  height: 10px;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
  margin: 10px 0 6px;
}

.bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bolt), var(--green));
  transition: width 0.4s ease;
}

.edit-fields {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.edit-fields li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
}

.edit-fields code {
  font-family: var(--mono);
  font-size: 12px;
  /* This renders a field name in most cases, but also a manager-typed win/
     loss reason or competitor name — free text with no server-side word-
     break guarantee. A long unbroken token must wrap, not push the metric
     card wider than its grid cell. */
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Quick approve: a manager reviewing routine quotes from a phone, one thumb,
   possibly at a red light — no table, no small text, one big button per card. */
.quick-approve-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.qa-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qa-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.qa-card-title {
  font-size: 16px;
  font-weight: 600;
}

.qa-card-sub {
  color: var(--ink-soft);
  font-size: 13px;
  margin-top: 2px;
}

.qa-urgency {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.qa-urgency-emergency { background: var(--red-bg); color: var(--red); }
.qa-urgency-urgent { background: var(--status-amber-bg); color: var(--status-amber); }
.qa-urgency-routine { background: var(--green-bg); color: var(--green); }

.qa-card-price {
  font-size: 20px;
  font-weight: 700;
}

.qa-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Glove-sized: same 56px floor as the nav menu rows (style.css, phase 11). */
.qa-approve-btn {
  min-height: 56px;
  flex: 1;
  font-size: 16px;
  font-weight: 700;
}

.qa-open-btn {
  min-height: 56px;
  padding: 0 18px;
}

@media (min-width: 641px) {
  .qa-approve-btn, .qa-open-btn { min-height: 44px; }
}

.dash-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

@media (min-width: 1100px) {
  .dash-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }

  .detail-panel {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.panel-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.panel-head h2 {
  margin: 0;
  font-size: 17px;
}

.panel-body {
  padding: 20px;
}

.table-scroll {
  overflow-x: auto;
}

table.quotes {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.quotes th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  font-weight: 650;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.quotes td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

table.quotes tbody tr {
  cursor: pointer;
}

table.quotes tbody tr:hover {
  background: var(--bolt-bg);
}

table.quotes tbody tr.selected {
  background: var(--bolt-bg);
  box-shadow: inset 3px 0 0 var(--bolt-strong);
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cust {
  font-weight: 600;
  color: var(--ink);
}

.sub {
  display: block;
  font-size: 12px;
  color: var(--ink-faint);
  font-weight: 400;
}

.detail-section {
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
  margin-top: 18px;
}

.detail-section:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.detail-section h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-bottom: 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.form-grid .field {
  margin: 0;
}

.work-item-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface);
}

.work-item-title {
  margin-bottom: 4px;
}

.work-item-card .hint.err,
.work-item-add-form .hint.err {
  color: var(--red);
}

.work-item-add-form {
  border: 1px dashed var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-top: 10px;
}

.work-item-add-form h4 {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-faint);
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  font-size: 15px;
  padding: 9px 11px;
}

/* Low-confidence field highlight — the whole field, not just the dot, so a
   tech scanning the screen catches it without reading every percentage.
   Border + tint on the field; the input itself gets a matching border so it
   still reads correctly if .field's background is overridden by a parent. */
.field.conf-mid {
  background: var(--status-amber-bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-left: -12px;
  margin-right: -12px;
  cursor: pointer;
}
.field.conf-mid input,
.field.conf-mid select,
.field.conf-mid textarea {
  border-color: var(--status-amber);
}
.field.conf-low {
  background: var(--red-bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-left: -12px;
  margin-right: -12px;
  cursor: pointer;
}
.field.conf-low input,
.field.conf-low select,
.field.conf-low textarea {
  border-color: var(--red);
  border-width: 2px;
}

/* Re-take banner: shown once, right after extraction, only when overall
   confidence is low. Impossible to miss, easy to dismiss. */
.retake-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
}
.retake-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.retake-body { flex: 1; min-width: 0; }
.retake-title {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--red);
}
.retake-sub {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.retake-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .retake-banner { flex-direction: column; }
  .retake-actions { flex-direction: row; width: 100%; }
  .retake-actions .btn { flex: 1; min-height: 56px; }
}

/* Human-in-the-loop gate: only rendered when a field is actually uncertain. */
.verify-gate {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--status-amber-bg);
  border: 1px solid var(--status-amber);
  border-radius: var(--radius-sm);
}
.verify-gate-title {
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 14px;
}
.verify-gate-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14px;
  cursor: pointer;
}
.verify-gate-check input {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--status-amber);
}
@media (max-width: 640px) {
  .verify-gate-check { min-height: 56px; }
}

.tier-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  overflow: hidden;
}

.tier-card > header {
  padding: 12px 14px;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.tier-card h4 {
  margin: 0;
  font-size: 15px;
}

.tier-card h4 .tier-key {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bolt-ink);
  display: block;
}

.tier-total {
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  font-size: 17px;
}

table.items {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.items th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
}

table.items td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

table.items input {
  width: 96px;
  padding: 6px 8px;
  font-size: 13px;
  text-align: right;
}

.tier-note {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-faint);
  background: var(--canvas);
}

.supplier-cell {
  min-width: 140px;
  white-space: normal;
}

.supplier-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.supplier-result {
  font-size: 12px;
  color: var(--ink-soft);
}

.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 6px;
}

.outcome-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}

.outcome-form input[type="text"] {
  width: auto;
  flex: 1 1 200px;
  min-width: 160px;
  padding: 8px 12px;
  font-size: 14px;
}

.outcome-form .hint {
  flex-basis: 100%;
  color: var(--red, #b3261e);
}

.save-state {
  font-size: 13px;
  color: var(--ink-faint);
  min-height: 20px;
}

.save-state.ok {
  color: var(--green);
}

.save-state.err {
  color: var(--red);
}

.edit-log {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  max-height: 220px;
  overflow-y: auto;
}

.edit-log li {
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
}

.edit-log code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
}

@media (max-width: 700px) {
  .section {
    padding: 56px 0;
  }

  .hero {
    padding: 64px 0 68px;
  }

  .cta-panel {
    padding: 32px 24px;
  }

  .metric-wide {
    grid-column: span 1;
  }
}

/* Menu panel: links injected by app.js (#user-menu, #site-nav) must meet the
   same glove-sized tap target as the static rows above them. Without this they
   render as 21px inline anchors — unusable on a jobsite. */
.menu-panel #user-menu a,
.menu-panel #site-nav a,
.menu-panel .user-menu a,
.menu-panel .site-nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 14px 20px;
  border-radius: var(--radius-sm, 9px);
  text-decoration: none;
}
@media (min-width: 641px) {
  .menu-panel #user-menu a,
  .menu-panel #site-nav a,
  .menu-panel .user-menu a,
  .menu-panel .site-nav a { min-height: 44px; padding: 10px 16px; }
}

/* ------------------------------------------- email verification banner
 *
 * Sits directly under the app header, full-bleed, so it reads as a state of
 * the whole workspace rather than a notice belonging to one card. Advisory
 * only — it never blocks anything, so it is deliberately calm: amber, one
 * line, one button.
 */
.verify-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 20px;
  font-size: 14.5px;
  border-bottom: 1px solid transparent;
}

.verify-banner:empty { display: none; }

.verify-banner p { margin: 0; }

.verify-banner.is-warn {
  background: var(--status-amber-bg);
  border-bottom-color: #e2cfa4;
  color: #6b4409;
}

.verify-banner.is-ok {
  background: var(--green-bg);
  border-bottom-color: #c1d9c0;
  color: #1f5334;
}

.verify-banner-error {
  flex-basis: 100%;
  text-align: center;
  color: var(--red);
}

@media (max-width: 560px) {
  .verify-banner { text-align: center; padding: 12px 16px; }
}

/* ------------------------------------------ internal traffic panel controls */
.traffic-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0;
}

.traffic-controls label { font-weight: 600; font-size: 14px; }
.traffic-controls select { max-width: 200px; }

/* ---------------------------------------------------------- internal leads */
.lead-message {
  max-width: 260px;
  font-size: 13px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.lead-notes-input {
  width: 100%;
  min-width: 140px;
  font-size: 13px;
  padding: 6px 8px;
}

/* ------------------------------------------------------- account settings */
.btn-danger {
  background: #fff;
  color: var(--red);
  border-color: #edc3ba;
}

.btn-danger:hover {
  background: var(--red-bg);
  border-color: var(--red);
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 14px 0 18px;
  cursor: pointer;
}

.checkbox-row input { margin-top: 3px; flex-shrink: 0; }

/* Visually hidden, still announced by screen readers.
 *
 * Used for the page-level <h1> on app screens whose visible design has no
 * title bar (the field wizard shows a step indicator, not a heading). Every
 * document needs exactly one h1 for heading navigation to make sense; hiding
 * it visually is the standard way to satisfy that without inventing UI. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}