/* EVO TrustGuard — page-client-create.css
 *
 * Owned by:    client-create.html
 * Category:    portal feature page
 * Cascade:     tokens → base → utilities → components → portal-chrome → shared → shared-themes → page
 * Edit policy: rules unique to this page only. Anything used by 5+
 *              pages should be promoted to /css/components.css or
 *              /css/portal-chrome.css with a /css/AGENTS.md update.
 *
 * Extracted:   2 <style> block(s), 95 lines.
 * Method:      verbatim move — no token substitution applied yet.
 *              See C56 audit Section 10.A for the deferred token
 *              normalization sprint plan.
 */

/* ── extracted <style> block 1 of 2 ── */

  body { font-family: var(--font-sans); background: var(--bg); color: var(--dark); line-height: var(--leading-loose); min-height: 100vh; display: flex; flex-direction: column; padding-bottom: var(--space-6); }

  /* TOP BAR — mirrors create-lead.html so the visual chrome stays
     consistent with the other intake-style flows (back arrow, centered
     title, theme toggle on the right). */
  .top-bar { background: var(--white); border-bottom: 1px solid var(--border); padding: calc(14px + env(safe-area-inset-top)) 16px 14px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: var(--z-nav); }
  .top-bar-back { background: none; border: none; padding: var(--space-2); margin: -8px; cursor: pointer; color: var(--dark); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
  .top-bar-back svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; }
  .top-bar-title { font-size: var(--text-input); font-weight: var(--weight-semibold); color: var(--dark); flex: 1; text-align: center; }
  .top-bar-spacer { width: 44px; height: 44px; flex-shrink: 0; }

  /* PAGE CONTENT */
  .page-content { padding: var(--space-4); flex: 1; max-width: 640px; margin: 0 auto; width: 100%; box-sizing: border-box; }

  /* Section card — same .pl-section pattern used everywhere else so the
     dark-mode override in shared-themes.css applies automatically. */
  .pl-section { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: var(--space-4); margin-bottom: var(--space-3-5); }
  .pl-section-title { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--dark); margin-bottom: var(--space-1); font-weight: var(--weight-regular); }
  .pl-section-subtitle { font-size: var(--text-md); color: var(--light); margin-bottom: var(--space-4); line-height: 1.45; }

  /* CIS field primitives — mirror the inline styles already living in
     purchased-lead.html and create-lead.html so this page reads as the
     same CIS visually without forking the design system. shared-themes.css
     already overrides .cis-input / .cis-select / .cis-textarea / .cis-label
     for dark mode, so we don't repeat those rules here. */
  .cis-field { margin-bottom: var(--space-3-5); }
  .cis-label { display: block; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); margin-bottom: 5px; }
  .cis-required { color: var(--red); margin-left: var(--space-0-5); }
  .cis-input { width: 100%; padding: var(--space-2-5) var(--space-3); border: 0.5px solid var(--text-disabled); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-input); color: var(--dark); background: var(--white); box-sizing: border-box; }
  .cis-input:focus { outline: none; border-color: var(--red); }
  .cis-textarea { width: 100%; min-height: 80px; padding: var(--space-2-5) var(--space-3); border: 0.5px solid var(--text-disabled); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-input); color: var(--dark); resize: vertical; line-height: var(--leading-relaxed); box-sizing: border-box; background: var(--white); }
  .cis-textarea:focus { outline: none; border-color: var(--red); }
  .cis-input.invalid, .cis-textarea.invalid { border-color: var(--red); }
  .cis-row { display: flex; gap: var(--space-2-5); }
  .cis-row > .cis-field { flex: 1; min-width: 0; }
  .cis-divider { height: 0.5px; background: var(--border); margin: var(--space-5) 0; }
  .cis-section-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-loose); margin-bottom: var(--space-4); }

  /* Inline field error — shown beneath an invalid input. NOT a toast (per
     spec — required field errors are inline, not toast-based). */
  .cis-error { color: var(--red); font-size: var(--text-sm); margin-top: var(--space-1); min-height: 16px; line-height: var(--leading-normal); display: none; }
  .cis-error.show { display: block; }

  /* Type pill row — Business / Individual / Government. Same visual as the
     Situation pills on create-lead.html so the platform reads as one set
     of intake controls. */
  .type-pill-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
  .type-pill { flex: 1 1 0; min-width: 100px; padding: var(--space-3) var(--space-3-5); border-radius: 10px; font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold); border: 1.5px solid var(--border); background: var(--white); color: var(--dark); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; min-height: 44px; }
  .type-pill:hover { border-color: var(--mid); }
  .type-pill.active { background: var(--red); border-color: var(--red); color: var(--white); }
  [data-theme="dark"] .type-pill { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
  [data-theme="dark"] .type-pill:hover { border-color: var(--text-muted); }
  [data-theme="dark"] .type-pill.active { background: var(--red); border-color: var(--red); color: var(--white); }

  /* POC phone row — mirrors purchased-lead.html / create-lead.html */
  .poc-phone-row { display: flex; gap: var(--space-2-5); align-items: flex-end; }
  .poc-phone-row > .cis-field:first-child { flex: 1; min-width: 0; }
  .poc-phone-type { display: flex; gap: var(--space-1); }
  .poc-phone-type-btn { padding: var(--space-2-5) var(--space-3-5); border: 0.5px solid var(--text-disabled); border-radius: var(--radius-md); background: var(--white); font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--text-muted); cursor: pointer; min-height: 44px; }
  .poc-phone-type-btn.active { background: var(--red); border-color: var(--red); color: var(--white); }

  /* Action row — Cancel + Save. The Save button reuses .cis-save-btn so
     the platform-wide dark-mode treatment applies consistently. */
  .action-row { display: flex; gap: var(--space-2-5); margin-top: var(--space-1); }
  .cis-cancel-btn { flex: 1; min-height: 48px; padding: var(--space-3-5); border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--white); color: var(--dark); font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--weight-semibold); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
  .cis-cancel-btn:hover { border-color: var(--mid); }
  .cis-save-btn { flex: 2; min-height: 48px; padding: var(--space-3-5); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--weight-semibold); cursor: pointer; transition: background 0.15s; border: none; background: var(--red); color: var(--white); }
  .cis-save-btn:hover { background: var(--red-hover); }
  .cis-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }
  [data-theme="dark"] .cis-cancel-btn { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
  [data-theme="dark"] .cis-cancel-btn:hover { border-color: var(--text-muted); background: var(--surface-elevated); }

  /* Form-level error banner — used for server-side / network errors that
     don't map to a single field. Same visual as the inline error but at
     the bottom of the form, above the action row. */
  .form-error { color: var(--red); font-size: var(--text-md); margin-bottom: var(--space-2-5); min-height: 18px; display: none; line-height: 1.45; }
  .form-error.show { display: block; }

  /* Toast — used only for success ("Client created") right before the
     navigation to client-detail. Background pinned via shared-themes.css
     dark-mode override (the .tg-toast class), so we don't redefine the
     dark color here. */
  .tg-toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom) / 2); left: 50%; transform: translateX(-50%); background: var(--dark); color: var(--white); padding: var(--space-2-5) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-base); font-weight: var(--weight-semibold); font-family: var(--font-sans); opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 200; }
  .tg-toast.show { opacity: 1; }

  /* Forced-mode hint — for callers that pass `?mode=add_client` explicitly.
     Reserved for future use when the page may be re-opened in a different
     mode; today it always behaves as add_client because lead_intake mode
     lives on purchased-lead.html. Kept here so the JS that reads the
     URL doesn't error when the param is missing. */
  .mode-hint { display: none; }

/* ── extracted <style> block 2 of 2 ── */

  /* Match the height-pinning rule used elsewhere — guards against the
     odd flex-shrink quirks that wipe out the brand logo on narrow viewports
     (no logo on this page yet, but pin in case we add one later). */
  .nav-brand img, .dash-nav-brand img { height: 48px !important; width: auto !important; min-height: 48px !important; max-height: none !important; }