/* BobBot shared visual theme ("D3" — approved 2026-08-29, mocked up as
 * referrals-softening-options.html before being rolled out here).
 *
 * Loaded on every page, before that page's own <style> block, so a page's
 * own rules always win where they set something explicitly. This file owns:
 *   - the two fonts (a serif display face used sparingly, a sans body face)
 *   - the design tokens (colours, radii) every page's own CSS should read
 *     from via var(...), rather than repeating the same hex values
 *   - the handful of rules that are genuinely identical everywhere (the
 *     page background/font, form-field styling, button shape)
 *
 * Deliberately NOT centralised here: card/panel borders and backgrounds.
 * Different pages nest cards differently (e.g. referrals.html's <fieldset>
 * inside a bare <form>), so a single generic selector risks double-boxing.
 * Each page keeps its own card-ish selectors, but the VALUES they use
 * (var(--line), var(--radius-panel), etc.) are centralised here.
 *
 * The shared header/footer (layout.js) is unchanged by this file on
 * purpose — it renders inline styles regardless of any page's CSS, and
 * softening it wasn't part of what was approved.
 */

/* Genuinely universal across all 23 pages (E1 in REVIEW-PLAN.md) — every
 * page's own <style> block used to open with this exact line. */
* { box-sizing: border-box; }

:root {
  --bg: #F3F5FB;
  --card-bg: #FFFFFF;
  --input-bg: #FBFBFE;
  --ink: #20222B;
  --heading: #181A22;
  --muted: #6c6f80;
  --line: #C3C9E3;
  --line-soft: #E1E4F0;
  --accent: #0000FE;
  --accent-quiet: #5457B8;
  --danger: #b91c1c;
  --success: #067647;
  --radius-card: 22px;
  --radius-panel: 16px;
  --radius-field: 14px;
  --radius-pill: 999px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Libre Franklin', Arial, Helvetica, sans-serif;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
}

/* The one warm serif line per page — a page's real title only. Secondary/
   utility headings (section labels, group headings, table headers) stay in
   the body face, same as the D3 mockup kept its "kicker" labels un-serifed. */
h1, .intro h2, h2.section-heading, .deal h2, #gate h2, .choice-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--heading);
}

label { color: var(--muted); }

input, textarea, select {
  background: var(--input-bg);
  font-family: var(--font-body);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent-quiet);
  background: #fff;
}

button, a.btn, .action, #new-session-btn {
  font-family: var(--font-body);
  border-radius: var(--radius-pill);
  font-weight: 600;
}

/* Genuinely identical across the 7 pages that use this exact container
 * shape (actions/contacts/chats/owner-content/owner-testimonials/
 * owner-accounts/summary) — every other page keeps its own `main {...}`
 * rule in its own <style> block, which (loaded after this file) still
 * wins the cascade on equal specificity, so this default never reaches
 * a page with a different intended width. */
main { max-width: 720px; margin: 0 auto; padding: 20px 16px; flex: 1; width: 100%; }

/* The small "back to Owner menu" link — identical on every owner-* screen
 * plus summary.html. */
#back-link { display: inline-block; margin-bottom: 10px; color: #0000FE; text-decoration: none; font-size: 13px; }

/* The shared top nav row (Home link, "Start a new session" button, a link
 * to the other list screen) on actions.html/contacts.html/chats.html —
 * only those three pages use these ids, confirmed before moving. */
.top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
#new-session-btn {
  padding: 10px 18px; font-size: 15px; border: 0;
  background: #0000FE; color: #fff; cursor: pointer; text-decoration: none;
  font-weight: 600;
}
#sessions-link, #actions-link, #home-link { color: #0000FE; text-decoration: none; font-size: 13px; }

/* The plain error-state colour on a status line — same two id names
 * (#status, #actions-status) reused across chat/summary/referrals/
 * register/login/every owner-* screen. */
#status.error, #actions-status.error { color: var(--danger); }