/* Shannon Comstock's brand for her client tools (added 2026-11-02).
   Loaded after each page's own styles, so it only overrides colors and fonts,
   and styles the one shared banner (.brand-banner) placed at the top of each client page.
   Source: Agent-OS/11-Brand-System/11-Visual-Identity.md
   navy #14213d, ivory #f7f2ea, champagne #c8a96e, ink #1a1a1a,
   Playfair Display (headings), Nunito Sans (text).
   When Krista updates a page: re-add <link rel="stylesheet" href="brand.css" /> after its </style>,
   and re-add the brand-banner block (copy it from seller-survey.html). */
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&family=Playfair+Display:wght@600;700&display=swap");

:root{
  --bg:#f7f2ea;
  --surface:#fffdf9;
  --ink:#1a1a1a;
  --muted:#4a4a4a;
  --line:#e6dccb;
  --gold:#7a5f2c;          /* readable champagne-brown for small text (5.9:1) */
  --gold-bright:#c8a96e;   /* champagne: borders, accents, icons */
  --gold-soft:#f3ead9;     /* soft champagne fill */
  --action:#14213d;        /* navy buttons */
  --action-press:#0b1426;
  --navy:#14213d;
}

body{font-family:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
input,textarea,select,button{font-family:inherit;}

h1,h2{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:0;color:var(--navy);}

.badge{background:var(--navy);color:#fff;}

/* ---- The shared banner: Shannon's photo, logo, name ---- */
.brand-banner{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 16px 18px;background:linear-gradient(165deg,#1c2d52 0%,#14213d 60%,#0f1a31 100%);border-bottom:3px solid var(--gold-bright);}
.brand-row{display:flex;align-items:center;justify-content:center;gap:16px;}
.brand-photo{width:104px;height:104px;border-radius:50%;object-fit:cover;border:3px solid var(--gold-bright);box-shadow:0 6px 16px rgba(0,0,0,.35);}
.brand-logo{width:104px;height:104px;border-radius:50%;background:#fffdf9;padding:4px;border:3px solid var(--gold-bright);box-shadow:0 6px 16px rgba(0,0,0,.35);box-sizing:border-box;}
.brand-name{margin:12px 0 0;font-family:"Playfair Display",Georgia,serif;font-size:22px;font-weight:700;line-height:1.2;color:#fffdf9;letter-spacing:.01em;}
.brand-line{margin:2px 0 0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-bright);}
/* Inside the Pocket Agent app the banner replaces the small avatar and name line */
.brand-banner ~ .wrap #avatar,.brand-banner ~ .wrap #topName{display:none;}

/* The smaller line under a page's main heading */
.head .sub{margin:4px 0 0;font-family:"Nunito Sans",sans-serif;font-size:17px;font-weight:600;color:var(--muted);}

/* Sticky bottom bars. The calculator's running-total bar is a solid dark bar with white text: make it navy.
   The survey and feedback forms' button area fades into ivory instead. */
.bar{background:var(--navy);}
form#form .bar{background:linear-gradient(180deg,rgba(247,242,234,0),var(--bg) 34%);}
.submit{box-shadow:0 8px 20px rgba(20,33,61,.25);}

/* Pocket Agent back bar */
#appBackBar{background:var(--navy) !important;}

/* Buyer tour: keep its rating buttons clearly outlined (the tour uses a darker line color on purpose) */
.fbtn,.favbtn,.rank{border-color:#BDB7A8;}

/* Walk-away calculator: selected answers, numbered tips, and Shannon's photo on the results card */
#timeline .chip[aria-pressed="true"],#nextplace .chip[aria-pressed="true"],.chips[role="group"] .chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff;}
.lever .n{background:var(--navy);}
.agentcard .av{background:var(--navy) url("brand-headshot.jpg") center/cover no-repeat;color:transparent;border:2px solid var(--gold-bright);}