/* CallDesk additions to the cloned CALL design.
 *
 * Kept out of theme.css / lp.css / auth.css because those three are copied
 * verbatim from the CALL build — anything written into them is lost the next
 * time they are re-copied. Linked after them in index.html and login.html.
 */

/* ---- one-click demo ---- */
.demo-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.demo-label { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); }
.demo-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--film-2); color: var(--txt-2); cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.demo-row:hover:not(:disabled) { background: var(--film-4); border-color: var(--line-2); color: var(--txt); }
.demo-row:disabled { opacity: .6; cursor: progress; }
.demo-row b { color: var(--txt); font-size: 13.5px; }
.demo-row .muted { color: var(--txt-3); font-size: 12px; }

/* The hero's third action. Quieter than the two CTAs beside it — it is the
   path for someone not ready to sign up, not a competing call to action. */
.btn-ghost-line { background: none; border: 1px solid var(--line-2); color: var(--txt-2); }
.btn-ghost-line:hover { border-color: var(--brand); color: var(--txt); }

/* Below the tablet break the hero actions stack, and a third full-width button
   pushes the demo card off the first screen. It keeps its own row instead. */
@media (max-width: 560px) {
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn-ghost-line { flex-basis: 100%; }
}

/* ---- auth: the states a card moves through (WO-008) ----
   Sign-up lands on "check your inbox"; sign-in can be a reset form or a
   resend form. Same card, same tokens; only the contents change. */

/* The auth card toggles blocks with the `hidden` attribute, and several of
   them carry an author `display` (grid, flex) that outranks the UA's
   [hidden] rule. Stated once here so every state switch actually hides. */
.auth-card [hidden] { display: none !important; }

.inbox-panel { display: grid; gap: 12px; justify-items: center; text-align: center; margin-top: 22px; }
.inbox-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); }
.inbox-to { margin: 0; font-size: 15px; line-height: 1.6; color: var(--txt); overflow-wrap: anywhere; }
.inbox-to b { font-weight: 700; }
.inbox-hint { margin: 4px 0 0; }
.inline-form { width: 100%; }

/* A second-rank action: same shape as .auth-btn, quieter surface. */
.auth-btn.secondary { background: var(--film-1); color: var(--txt); border: 1px solid var(--line-2); }
.auth-btn.secondary:hover:not(:disabled) { border-color: var(--line-3); background: var(--film-2); }

.field-hint { font-size: 12px; color: var(--txt-3); }