/* ══════════════════════════════════════════════════════════════════════
   Descriptors.com product-family design system — Phase 1 foundation
   One system, two doors: the institution (Descriptors.com, azure) and
   the helper (WhoBilled.me, blue). Mercury statement aesthetic × Stripe
   data patterns. Approved spec: the "Descriptors Family Redesign" canvas
   (2026-08-22). Both sites import this file; page CSS builds on it and
   overrides nothing here.
   ══════════════════════════════════════════════════════════════════════ */

/* Fonts: Newsreader (editorial display serif) · Public Sans (workhorse UI)
   · IBM Plex Mono (descriptor strings — the product's signature artifact).
   Pages must include the Google Fonts <link> (kept in HTML for preconnect):
   https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap
*/

:root {
  /* ── Ground & ink (warm paper, never pure white/black) ── */
  --fam-paper:    #FBFBF9;
  --fam-card:     #FFFFFF;
  --fam-ink:      #14181F;
  --fam-dim:      #5A6472;
  --fam-dim-2:    #8A8F98;
  --fam-faint:    #B9BEC6;
  --fam-line:     #E7E5DF;   /* warm hairline */
  --fam-line-2:   #F0EEE9;   /* row separators */
  --fam-well:     #F6F5F1;   /* inset surfaces (descriptor strips) */

  /* ── Door accents ── */
  --fam-azure:     #1470A6;  /* Descriptors.com — the institution */
  --fam-azure-d:   #0F5680;
  --fam-azure-t:   rgba(20, 112, 166, 0.07);
  --fam-azure-line:#CBD9E4;
  --fam-blue:      #1F6FEB;  /* WhoBilled.me — the helper */
  --fam-blue-d:    #1859BE;
  --fam-sky:       #38BDF8;  /* logo mark stroke on dark tiles */

  /* ── Shared trust states (identical on both sites, non-negotiable) ── */
  --fam-verified:      #0F7B4D;
  --fam-verified-bg:   #E8F6EE;
  --fam-verified-line: #CBEBD8;
  --fam-estimated:     #92590A;
  --fam-estimated-bg:  #FBF3E4;
  --fam-danger:        #B42318;
  --fam-danger-bg:     #FDECEA;

  /* ── Form affordance (required marks, save-the-sale) ── */
  --fam-purple:    #5B3FA8;
  --fam-purple-bg: #F4F1FB;
  --fam-purple-line:#E2DAF5;

  /* ── Type roles ── */
  --fam-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --fam-body:    'Public Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fam-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Rhythm ── */
  --fam-r-card: 12px;
  --fam-r-ctl:  9px;
  --fam-r-pill: 999px;
  --fam-shadow: 0 2px 10px rgba(20, 24, 31, 0.04);
}

/* ── Base ─────────────────────────────────────────────────────────── */
.fam { background: var(--fam-paper); color: var(--fam-ink);
       font-family: var(--fam-body); font-size: 15px; line-height: 1.55;
       -webkit-font-smoothing: antialiased; }
.fam a { color: var(--fam-azure); text-decoration: none; }
.fam a:hover { color: var(--fam-azure-d); }
.fam--wbm a { color: var(--fam-blue); }
.fam--wbm a:hover { color: var(--fam-blue-d); }

/* Editorial headline: sentence case, serif, tight. NOT all-caps. */
.fam-display { font-family: var(--fam-display); font-weight: 500;
               letter-spacing: -0.01em; line-height: 1.1; text-wrap: balance; }
/* The statement sentence — a summary written as prose, Mercury-style. */
.fam-statement { font-family: var(--fam-display); font-weight: 400;
                 font-size: 17px; color: var(--fam-dim); }
/* Section label: the ONLY sanctioned uppercase. */
.fam-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
             text-transform: uppercase; color: var(--fam-dim-2); }
/* Descriptor strings — always mono, always this voice. */
.fam-mono { font-family: var(--fam-mono); font-weight: 500; }
/* Numbers line up or they lie. */
.fam-num { font-variant-numeric: tabular-nums; }

/* ── Surfaces ─────────────────────────────────────────────────────── */
.fam-card { background: var(--fam-card); border: 1px solid var(--fam-line);
            border-radius: var(--fam-r-card); box-shadow: var(--fam-shadow); }
.fam-well { background: var(--fam-well); border: 1px solid var(--fam-line);
            border-radius: 8px; }

/* ── Trust pills ──────────────────────────────────────────────────── */
.fam-pill { display: inline-flex; align-items: center; gap: 6px;
            font-size: 11px; font-weight: 700; border-radius: var(--fam-r-pill);
            padding: 2px 10px; border: 1px solid transparent; }
.fam-pill--verified  { color: var(--fam-verified); background: var(--fam-verified-bg);
                       border-color: var(--fam-verified-line); }
.fam-pill--estimated { color: var(--fam-estimated); background: var(--fam-estimated-bg); }
.fam-pill--danger    { color: var(--fam-danger); background: var(--fam-danger-bg); }
.fam-pill--neutral   { color: var(--fam-dim); background: var(--fam-well); }

/* ── Controls ─────────────────────────────────────────────────────── */
.fam-btn { display: inline-flex; align-items: center; justify-content: center;
           gap: 9px; padding: 12px 20px; min-height: 44px; border: none;
           border-radius: var(--fam-r-ctl); cursor: pointer;
           font-family: var(--fam-body); font-size: 14px; font-weight: 700;
           transition: background .15s, border-color .15s, color .15s; }
.fam-btn:disabled { opacity: .5; cursor: default; }
.fam-btn--primary { background: var(--fam-azure); color: #fff; }
.fam-btn--primary:hover { background: var(--fam-azure-d); }
.fam--wbm .fam-btn--primary { background: var(--fam-blue); }
.fam--wbm .fam-btn--primary:hover { background: var(--fam-blue-d); }
.fam-btn--ink     { background: var(--fam-ink); color: #fff; }
.fam-btn--outline { background: var(--fam-card); color: var(--fam-ink);
                    border: 1px solid var(--fam-azure-line); font-weight: 600; }
.fam-btn--outline:hover { border-color: var(--fam-azure); }
.fam-btn--ghost   { background: var(--fam-line-2); color: var(--fam-dim); }
.fam-btn--danger  { background: var(--fam-card); color: var(--fam-danger);
                    border: 1px solid #F3C6C1; }

.fam input.fam-field, .fam select.fam-field, .fam textarea.fam-field {
  width: 100%; padding: 11px 13px; border: 1px solid #D8D6CF;
  border-radius: var(--fam-r-ctl); font-size: 14px; font-family: var(--fam-body);
  background: var(--fam-card); color: var(--fam-ink); }
.fam input.fam-field:focus, .fam select.fam-field:focus, .fam textarea.fam-field:focus {
  outline: none; border-color: var(--fam-azure);
  box-shadow: 0 0 0 3px var(--fam-azure-t); }
.fam-req { color: var(--fam-purple); font-weight: 700; margin-left: 2px; }

/* ── The statement row: the family's signature component ──────────── */
.fam-strow { display: flex; align-items: center; gap: 16px;
             padding: 14px 0; border-top: 1px solid var(--fam-line-2); }
.fam-strow:first-of-type { border-top: 1px solid var(--fam-line); }
.fam-strow .fs-desc { font-family: var(--fam-mono); font-weight: 500;
                      font-size: 13.5px; flex-shrink: 0; }
.fam-strow .fs-name { font-weight: 600; font-size: 14px; flex-grow: 1; }
.fam-strow .fs-meta { font-family: var(--fam-mono); font-size: 12px;
                      color: var(--fam-dim-2); font-variant-numeric: tabular-nums; }

/* ── Stripe-rule tables ───────────────────────────────────────────── */
.fam-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fam-table th { text-align: left; font-size: 11px; font-weight: 700;
                letter-spacing: 0.07em; text-transform: uppercase;
                color: var(--fam-dim-2); padding: 8px 10px;
                border-bottom: 1px solid var(--fam-line); }
.fam-table td { padding: 13px 10px; border-bottom: 1px solid var(--fam-line-2);
                font-variant-numeric: tabular-nums; }
.fam-table tr:last-child td { border-bottom: none; }
.fam-table th.num, .fam-table td.num { text-align: right; }
.fam-table tr.rowlink { cursor: pointer; }
.fam-table tr.rowlink:hover td { background: #F8FAFB; }

/* Definition rows (profile statements) */
.fam-def { display: flex; justify-content: space-between; gap: 16px;
           padding: 11px 0; border-bottom: 1px solid var(--fam-line-2);
           font-size: 14px; }
.fam-def .k { color: var(--fam-dim-2); }
.fam-def .v { font-weight: 600; text-align: right; }

/* Sparkline convention: inline SVG, stroke = door accent, 1.8px,
   endpoint dot r=2.2. Muted (--fam-faint) when the row is paused. */