/* ClearFrank for Business — enterprise Phonecheck deployment page.
   Built on the tokens in style.css so it follows light/dark with everything else. */

:root { --warn: #b45309; --warn-soft: #fef3c7; }
[data-theme="business"] {
  --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.14);
}

/* ---- Tethered vs remote ---- */
.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}

.mode-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.mode-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}

.mode-card h3 { margin: 0 0 6px; font-size: 1rem; }
.mode-card p { margin: 0 0 10px; font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
.mode-note { font-size: 0.8rem; font-weight: 600; color: var(--accent-dark); }

/* ---- Fleet dashboard mock ---- */
.bay {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: hidden;
}

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

.bay-title { font-size: 0.85rem; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.bay-live { font-size: 0.78rem; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.bay-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }

.bay-rows { display: flex; flex-direction: column; }

.bay-row {
  display: grid;
  grid-template-columns: 1.5fr auto 1.6fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.bay-row:last-child { border-bottom: 0; }

.bay-dev { font-weight: 600; }
.bay-dev em { font-style: normal; font-weight: 400; color: var(--muted); }
.bay-meta { color: var(--muted); font-size: 0.78rem; }

.bay-chip {
  justify-self: start;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--bg-alt);
  color: var(--muted);
  white-space: nowrap;
}
.bay-chip--ok { background: var(--good-soft); color: var(--good); }
.bay-chip--warn { background: var(--warn-soft); color: var(--warn); }

.bay-state { justify-self: end; font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.bay-state--done { color: var(--good); font-weight: 600; }

.bay-foot { margin: 0; padding: 10px 16px; font-size: 0.75rem; color: var(--muted); background: var(--bg-alt); }

/* ---- The loop ---- */
.loop { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.loop li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }

.loop-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.loop strong { display: block; margin-bottom: 3px; font-size: 0.95rem; }
.loop p { margin: 0; font-size: 0.87rem; color: var(--muted); line-height: 1.6; }

/* ---- Coverage strip ---- */
.features--tight { padding-top: 0; }

.coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 760px;
  margin: 0 auto;
}

.cov {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  font-size: 0.85rem;
  font-weight: 600;
}

.coverage-note {
  max-width: 640px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.65;
}

@media (max-width: 720px) {
  .mode-grid { grid-template-columns: 1fr; }
  .bay-row { grid-template-columns: 1fr auto; row-gap: 5px; }
  .bay-meta, .bay-state { grid-column: 1 / -1; justify-self: start; }
}

/* ---- Platform section: the ClearFrank layer, then the Phonecheck layer ---- */
.feature-card--pillar { border-color: var(--accent); }
.feature-card--pillar .feature-icon { background: var(--accent-soft); color: var(--accent); }

.platform-claim {
  max-width: 640px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.section-head--sub { margin-top: 54px; }
.section-head--sub h2 { font-size: 1.35rem; }

/* ---- The platform statement, above the first panel ---- */
.platform-lead {
  margin: 0 0 22px;
  padding: 20px 24px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
}

@media (max-width: 620px) {
  .platform-lead { padding: 16px 18px; font-size: 0.93rem; text-align: left; }
}

.platform-cta { margin: 0 0 22px; text-align: center; }
.platform-cta .primary { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 12px 24px; }


/* The dashboard CTA sends people to a sign-in wall. Anyone who has not signed up yet needs to be
   told, at the button, that there is another door. */
.platform-cta-note {
  margin: 10px 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
}
.platform-cta-note a { color: var(--accent-dark); font-weight: 600; }

/* ---- Setup form: the extra qualifying fields ---- */
.field-group {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
}
.field-group legend {
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.chip-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-choices label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  background: var(--panel);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.chip-choices label:hover { border-color: var(--accent); }
/* The chip itself is the hit target, so the box only needs to carry the state. */
.chip-choices input { accent-color: var(--accent); margin: 0; }
.chip-choices input:checked + span { font-weight: 600; color: var(--accent-dark); }
.chip-choices label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* A field the visitor got wrong should say so at the field, not only in a line under the button. */
.checkout-form .field-error {
  border-color: var(--bad, #dc2626);
}

.form-small {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
}
.form-small a { color: var(--accent-dark); }

/* ---- Portal preview -------------------------------------------------------------------------
   Every class here is prefixed pv- and defined in THIS file. The first version reused .stat and
   .preview-table from the fleet dashboard, but /business loads style.css, verify.css and this one,
   NOT fleet.css — so the cards arrived unstyled and the label, value and note ran together on one
   line. Borrowing a class across pages that do not share a stylesheet is how that happens.
   Modelled on the desk console's table: dense rows, a sub-line under each cell, grade squares and
   status chips, so a prospect sees the real thing rather than a sketch. ------------------------ */
.portal-preview { margin: 26px 0 0; }
.portal-preview figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 0.82rem;
  color: var(--muted);
}
.preview-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.preview-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.preview-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.preview-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.preview-url {
  margin-left: 10px;
  font-size: 0.72rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.preview-tabs {
  display: flex;
  gap: 2px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.pv-tab {
  padding: 11px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.pv-tab.is-on { color: var(--accent-dark); border-bottom-color: var(--accent); }

.preview-body { padding: 16px; }

.preview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.pv-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.pv-stat--strong { border-color: var(--accent); background: var(--accent-soft); }
.pv-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.pv-stat-value { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pv-stat-note { font-size: 0.74rem; color: var(--muted); }

/* The table is wide by design, so it scrolls inside the frame rather than the page. */
.preview-scroll { overflow-x: auto; }
.pv-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 660px; }
.pv-table th {
  text-align: left;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-alt);
  padding: 9px 12px;
  white-space: nowrap;
}
.pv-table td { padding: 10px 10px; border-top: 1px solid var(--border); vertical-align: top; }
.pv-table td.r, .pv-table th.r { text-align: right; font-variant-numeric: tabular-nums; }
.pv-table .sub { display: block; font-size: 0.73rem; color: var(--muted); margin-top: 2px; }
.pv-table strong { font-weight: 650; }

.pv-g {
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 7px;
  font-weight: 750;
  font-size: 0.76rem;
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.pv-g-a, .pv-g-b { background: var(--good-soft, #e8f8ee); color: var(--good, #16a34a); }
.pv-g-d, .pv-g-e { background: #fdf3e3; color: #8a600f; }

.pv-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}
.pv-chip.good { background: var(--good-soft, #e8f8ee); color: var(--good, #16a34a); }
.pv-chip.warn { background: #fdf3e3; color: #8a600f; }
.pv-chip.accent { background: var(--accent-soft); color: var(--accent-dark); }

@media (max-width: 620px) {
  .preview-body { padding: 12px; }
}

/* The value column is what a reader's eye goes to, so it never wraps and never clips. */
.pv-table td.r, .pv-table th.r { white-space: nowrap; padding-right: 12px; }
.pv-table td.r .sub { white-space: nowrap; }

/* Grade C sits between the good and the poor bands. */
.pv-g-c { background: var(--accent-soft); color: var(--accent-dark); }

/* A scrollable table should say so rather than just appear cut off. */
.preview-scroll { overflow-x: auto; scrollbar-width: thin; }

/* ---- console preview: the lock states ----
   Added when the preview was rebuilt to mirror the real console. The point of the screenshot is
   the lock, so the three states it can be in (held, open, untested) each read differently. */
.pv-stat--lock { border-color: color-mix(in srgb, var(--good) 40%, var(--border)); }
.pv-stat--lock .pv-stat-value { color: var(--good); }
.pv-down { color: #dc2626; font-weight: 600; }
[data-theme="business"] .pv-down {color: #f87171;}

.pv-lockbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 10px; background: var(--accent-soft);
}
.pv-lock-kicker { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pv-lock-head { display: block; margin: 3px 0 4px; font-size: 1rem; letter-spacing: -.01em; }
.pv-lock-sub { display: block; font-size: .78rem; color: var(--muted); line-height: 1.55; max-width: 56ch; }
.pv-lock-btn {
  margin-left: auto; flex: none; padding: 9px 16px; border-radius: 8px;
  background: var(--accent); color: var(--accent-text); font-size: .8rem; font-weight: 700; white-space: nowrap;
}

.pv-held { color: var(--good); }
.pv-btn { display: inline-block; padding: 5px 11px; border-radius: 8px; background: var(--accent); color: var(--accent-text); font-size: .74rem; font-weight: 700; }
.pv-chip.lock { background: var(--good-soft, #e8f8ee); color: var(--good, #16a34a); }
.pv-g-none { background: transparent; border: 1px dashed var(--border); color: var(--muted); }

.panel--lock { margin-top: 26px; }
.panel--lock .mode-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.panel--lock .mode-card em { font-style: normal; font-weight: 700; color: var(--text); }

@media (max-width: 640px) { .pv-lock-btn { margin-left: 0; } }

/* The grade chip was wrapping to two lines in the narrower five-column preview. */
.pv-g { white-space: nowrap; }

/* A signed-in customer needs a way back to the console from the marketing page, without the
   sign-in link competing with the main call to action. */
.ghost-nav {
  padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--text); white-space: nowrap;
}
.ghost-nav:hover { border-color: var(--accent); color: var(--accent-dark); }
.nav-inner > .ghost-nav + .btn-nav { margin-left: 8px; }