/* NRG brand layer for Client Tools (2026-10-23).
   Linked LAST in every page's <head>, so Krista's markup and page styles stay as she wrote them
   and her future updates can still be combined by hand. Everything NRG about the look lives here.
   Matches nrgmovesyou.com: Warm Bone page, Charcoal ink, Travertine hairlines, square edges,
   Libre Caslon Text for sentences, Archivo Expanded spaced caps for labels, buttons and titles,
   Burnt Clay only on the main button. Source: Agent-OS/11-Brand-System/11-Visual-Identity.md */

@import url("https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Archivo:wdth,wght@125,500;125,600;125,700;125,800&display=swap");

:root{
  --bg:#F5F1EB; --surface:#D8D0C5; /* Jassey 10/23: Warm Bone page, cards in the darker Travertine */ --ink:#222220; --muted:#5B5550; --line:#D8D0C5;
  --gold:#7D6A6B; --gold-bright:#D8D0C5; --gold-soft:#EDE7DE;
  --action:#9E5A44; --action-press:#86492F;
  --clay:#9E5A44; --warn:#8A3F2B;
  /* the kit's greens, yellow and blue are out of the brand: love = charcoal, maybe = Travertine, no = quiet oxblood */
  --love:#222220; --love-soft:#EDE7DE; --good:#222220; --bad:#8A3F2B; --bad-soft:#F3E6E0; --maybe:#D8D0C5; --focus:#9E5A44;
  --nrg-serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --nrg-wide:"Archivo",Arial,sans-serif;
}

/* Square edges, no soft shadows, everywhere */
*,*::before,*::after{border-radius:0 !important;box-shadow:none !important;}
/* the round NRG logo stays round */
.avatar.logo,.avatar.logo img,.hero .logo,.hero .logo img,img[src*="nrg-circle"]{border-radius:50% !important;}

/* Sentences: Caslon at one modest size */
html body{background:var(--bg);color:var(--ink);font-family:var(--nrg-serif);font-size:17px;line-height:1.6;}
button,input,select,textarea{font-family:var(--nrg-serif);}
p,.lede,.intro,.p,.sub,.hint,.note,.help,.fine,.byline,.read p{font-family:var(--nrg-serif);}
.lede,.intro,.p,.hint,.note,.help,.fine,.sub,.barhint,.livenote,.agentnote,.welcome{font-size:16px;line-height:1.6;}
.foot,.skel{font-size:14px;}

/* Titles: wide bold caps, never big Caslon */
h1,.hero h1,.head h1,.addr h1,h1.addr{font-family:var(--nrg-wide);font-stretch:125%;font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:1.25;font-size:21px;}
h2,.ct h2,.card h2,.read h2,.done h2,.fail h2,.photo-day h2{font-family:var(--nrg-wide);font-stretch:125%;font-weight:600;text-transform:uppercase;letter-spacing:.12em;line-height:1.4;font-size:14px;}
h3{font-family:var(--nrg-wide);font-stretch:125%;font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:13px;line-height:1.45;}
@media(min-width:700px){h1,.hero h1,.head h1,.addr h1,h1.addr{font-size:25px;}}

/* Questions read as sentences, in Caslon */
.q,label.q,.big,.done .big,.result .big,.cta{font-family:var(--nrg-serif);font-weight:400;letter-spacing:0;text-transform:none;}
.q{font-size:19px;line-height:1.4;}
.done .big,.result .big{font-size:21px;line-height:1.35;}

/* Short labels: Engravers-style spaced caps */
.when,.step,.kicker,.eyebrow,.badge,.hp-badge,.label,.caps,.lbl,.who b,.top .nm{font-family:var(--nrg-wide);font-stretch:125%;font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:11px;line-height:1.6;}
.when,.step,.kicker,.eyebrow{color:var(--gold);font-size:10.5px;letter-spacing:.2em;}
.ct h2,.card h2{font-size:15px;font-weight:700;letter-spacing:.1em;color:var(--ink);margin-top:2px;}
.badge,.hp-badge{background:var(--ink);color:var(--bg);padding:7px 12px;}
.who{font-size:15px;color:var(--muted);}
.who b{color:var(--ink);font-size:11px;margin-bottom:2px;}

/* Field labels stay readable sentences */
label,.field label,.field>label,.flabel,.legend{font-family:var(--nrg-serif);font-weight:400;font-size:16px;color:var(--ink);letter-spacing:0;text-transform:none;}
label .opt,.field label .opt,.opt{color:var(--muted);font-weight:400;}

/* Cards: flat panels with a hairline */
.card,.btn,.ans,.frame,.advbox,.agentcard,.notice,.welcome{background:var(--surface);border:1px solid var(--line);}
.card.open{border-color:var(--ink);}
.ico,.btn .ico{background:transparent;border:1px solid var(--line);color:var(--ink);}
.note{background:transparent;padding-left:0;padding-right:0;}

/* Inputs: square, hairline, clay focus */
input[type=text],input[type=email],input[type=tel],input[type=number],input:not([type]),textarea,select{border:1px solid #CFC6BA;background:#FBF9F5;color:var(--ink);font-family:var(--nrg-serif);font-size:17px;}
input:focus,textarea:focus,select:focus{outline:2px solid var(--clay);outline-offset:1px;border-color:var(--ink);}
:focus-visible{outline:2px solid var(--clay);outline-offset:2px;}

/* The one main button: clay with bone spaced caps */
.go,.submit,button.send,.btn.primary,.primary,button.primary{background:var(--action);color:var(--bg);border:0;font-family:var(--nrg-wide);font-stretch:125%;font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;line-height:1.5;min-height:52px;}
.go:active,.submit:active,button.send:active,.primary:active,.btn.primary:active{background:var(--action-press);transform:none;}
@media(hover:hover){.go:hover,.submit:hover,button.send:hover,.primary:hover{filter:brightness(1.08);}}
.btn.primary .ico{background:transparent;border-color:rgba(245,241,235,.45);color:var(--bg);}
.btn.primary .sub,.primary .sub{color:rgba(245,241,235,.82);font-family:var(--nrg-serif);text-transform:none;letter-spacing:0;font-size:14px;font-weight:400;}
.btn.primary .chev{color:var(--bg);}
/* a "back" or "start over" button is never a second clay button */
.go.ghost,.nav .ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);}

/* Secondary buttons: charcoal or hairline, spaced caps */
.btn2,.btn,.chip,.lang,.alt,.btn.alt,button.link-big,.more{font-family:var(--nrg-wide);font-stretch:125%;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;}
.btn2{border:1px solid var(--ink);background:transparent;color:var(--ink);}
.btn2.solid{background:var(--ink);color:var(--bg);}
.lang{border:1px solid var(--line);background:transparent;}
/* menu rows in the Pocket Agent (icon + words) read as words, not shouting caps */
.btn:has(.tx){font-family:var(--nrg-serif);font-size:17px;font-weight:400;letter-spacing:0;text-transform:none;border:1px solid var(--line);}
.btn.primary{font-family:var(--nrg-wide);font-size:12px;letter-spacing:.18em;text-transform:uppercase;}

/* Choices: square, selected = charcoal with bone text (as on the website) */
.chip,.pick,.choice,.ans,.rbtn,.sbtn,.fbtn,.favbtn,.dot,button.big{border:1px solid #CFC6BA;background:#FBF9F5;color:var(--ink);}
.pick,.ans,button.big{font-family:var(--nrg-serif);font-weight:400;letter-spacing:0;text-transform:none;font-size:16px;}
.chip[aria-pressed="true"],.pick[aria-pressed=true],.ans[aria-pressed=true],.sbtn.on,.favbtn.on,.choice.on,.urow.on .uhead{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.ans .dot{border:1px solid var(--muted);}
.ans[aria-pressed=true] .dot{border-color:var(--bg);background:var(--bg);box-shadow:none !important;}
.rbtn.love.on,.rbtn.maybe.on{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.favbtn.on,.fbtn.like,.fbtn.dislike{border-width:1px;}
.dot.cur{outline:1px solid var(--ink);outline-offset:3px;}
.dot.done{background:var(--ink);border-color:var(--ink);color:var(--bg);}

/* Progress and numbered steps */
.prog{height:2px;background:var(--line);}
.prog i{background:var(--clay);}
.steps li::before,.lever .n{background:transparent;color:var(--ink);border:1px solid var(--ink);font-family:var(--nrg-wide);font-stretch:125%;font-weight:600;font-size:12px;}
.ok{background:transparent;border:1px solid var(--line);font-weight:400;}

/* Done screens */
.done .mark,.mark{background:transparent;border:1px solid var(--ink);color:var(--clay);}

/* Errors in a quiet oxblood, never shouting */
.err,.offline,.warn{border:1px solid var(--warn);color:var(--warn);background:transparent;}

/* Avatars: the agent photo square like the website's team photos; initials in wide caps */
.avatar{background:var(--ink);color:var(--bg);font-family:var(--nrg-wide);font-stretch:125%;font-weight:700;letter-spacing:.08em;border:1px solid var(--line);}
.agentcard .av{font-family:var(--nrg-wide);font-stretch:125%;font-weight:700;}

/* Hero bands on the surveys and feedback: flat Travertine, no glow */
.hero .band,.hero .photo{background:#E9E2D8;}

/* Sticky bottom bars sit on Warm Bone */
.bar:has(> .inner){background:linear-gradient(180deg,rgba(245,241,235,0),var(--bg) 34%);}
.toast{background:var(--ink);color:var(--bg);font-family:var(--nrg-serif);}

/* Links */
a{color:inherit;}
.foot a,.fine a,.lede a,.intro a,p a,li a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--clay);text-underline-offset:3px;}

/* The team photo in the Pocket Agent: a small editorial portrait, like the website's team photos */
.hero .avatar:has(img){width:min(100%,340px);height:auto;aspect-ratio:2400/980;border:0;background:transparent;}
.hero .avatar img{object-position:center top;}

/* NRG's own pages: the charcoal logo with a white ring (never the white-logo files) */
.hero .logo[src*="nrg-circle-charcoal"],footer img[src*="nrg-circle-charcoal"]{border:1px solid #FFFFFF;background:#FFFFFF;}
.req{color:var(--muted);}
.hero .eyebrow{color:var(--gold);}
footer img[src*="nrg-circle-charcoal"]{filter:none;}

/* Sentence text never under 16px; only legal fine print in footers is smaller */
.ct p,.qsub,.subhead,.byline,span.note,label.note,.adv,.hero .brand,.card p,.card .sub,.addr .sub,p.sub{font-size:16px;line-height:1.55;}

/* Cards in Travertine: hairline in Mauve Ash so the edge still reads; survey headers stay on the page color */
.card,.btn:has(.tx),.ans,.advbox,.agentcard,.notice,.welcome{border-color:#BDB3A6;}
.hero:has(.band),.hero:has(.photo),.hero:has(.head){background:transparent;}
.ico,.btn .ico{border-color:#A99E92;}
/* keep labels small and questions larger inside cards (the 16px sentence rule above must not catch them) */
.card .step,.card .when,.card .kicker,.card .eyebrow,.ct .when,.card .label,.card .lbl{font-size:10.5px;line-height:1.6;}
.card .q,.card p.q{font-size:19px;line-height:1.4;}
.card .big{font-size:21px;line-height:1.35;}

/* Fresh-review fixes (2026-10-23) */
/* listing tool (agent.html): no gold glow or gold-filled drawing */
.hero-preview{background:#E9E2D8;}
svg [fill="#C9A54C"],svg [fill="#B0862A"]{fill:var(--clay);}
svg [fill="#EAD9A6"],svg [fill="#E4D6AE"]{fill:#D8D0C5;}
svg [fill="#FBF4E2"]{fill:#F5F1EB;}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]){background:#FBF9F5;border-color:#CFC6BA;}
/* showing feedback: flat panels, readable picked score */
.idbtn,button.num{background:#FBF9F5;border:1px solid #CFC6BA;color:var(--ink);}
button.num[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg);}
.overall,.neighbor-offer{background:#E9E2D8;border:1px solid #BDB3A6;}
.more{background:transparent;}
/* sentence text never under 16px */
.err,.consent,.idbtn,.quiet,.req,.quiet button{font-size:16px;}
/* tour: liked = charcoal, disliked = hairline with a strike, both clearly different from untouched */
.fbtn.like{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.fbtn.like .gl{color:var(--bg);}
.fbtn.dislike{background:#E9E2D8;border-color:var(--ink);text-decoration:line-through;}
/* walk-away result bar: a negative number in Travertine, not pink */
.bar .num.neg{color:#D8D0C5;}
.prevlabel{font-family:var(--nrg-serif);font-size:16px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400;}
/* small labels on Travertine cards in a darker warm gray so they read (Mauve is too light there) */
.card .step,.card .when,.card .kicker,.card .eyebrow,.card .num,.ct .when,.adv,.hero .eyebrow{color:#4F4A45;}
.who{font-size:16px;}
.quiet,footer,footer div{color:#4F4A45;}
/* Pocket Agent home: more room so it doesn't feel squished (Jassey, 2026-10-24) */
.wrap{padding-left:20px;padding-right:20px;padding-top:max(14px,env(safe-area-inset-top));}
#v-home .hero{padding:10px 0 26px;}
#v-home .hero .avatar{margin-bottom:24px;}
#v-home h1{font-size:17px;letter-spacing:.08em;line-height:1.5;margin:0 auto 12px;max-width:20ch;}
#v-home .lede{font-size:15.5px;line-height:1.6;max-width:30ch;margin:0 auto;}
#v-home .band .kicker{margin:0 0 14px;}
#v-home .band{margin-top:52px;}
#v-home .hero + .band{margin-top:28px;}
#v-home .band .btn{margin-bottom:12px;min-height:66px;padding:16px 18px;font-size:16.5px;font-weight:400;gap:16px;line-height:1.35;}
#v-home .band .btn .ico{width:34px;height:34px;}
#v-home .band .btn .ico svg{width:18px;height:18px;}
#v-home .band .btn .sub{font-size:13.5px;margin-top:4px;}