/* The Market Rocket App's look, shared by the briefs, the staff page, the
   client's form and the legal pages. Linked after each page's own styles, so
   where both set something, this wins.

   Palette: sage for actions, honey for progress, coral for anything waiting
   on someone, on a warm off-white. Figtree throughout, served by the app. */

:root{
  --paper:#F6F4EC;          /* the page */
  --surface:#FFFFFF;        /* panels and cards */
  --field:#FCFBF7;          /* inputs at rest */
  --ink:#26302A;            /* text */
  --muted:#6E7468;          /* supporting text */
  --rule:#E4E2D6;           /* hairlines */
  --signal:#3F6B55;         /* sage: buttons, links, the current thing */
  --signal-soft:#E3EEE6;
  --honey:#D9A441;          /* progress */
  --honey-soft:#FBF0D9;
  --caution:#8A6212;        /* honey, dark enough to read */
  --warn:#8A6212;
  --good:#2F5A43;           /* done */
  --good-soft:#E3EEE6;
  --flag:#9A3F2A;           /* coral: waiting on someone, or wrong */
  --flag-soft:#FBE4DC;
  --font:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  --lift:0 1px 2px rgba(70,58,30,.05),0 6px 20px rgba(70,58,30,.05);
}

/* Type. One family; weight carries the hierarchy. */
body{font-family:var(--font);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
button,input,select,textarea,.card,.fold,.arch,.back,.closebtn,.btn{font-family:inherit}
.verdict .word{font-family:var(--font);font-weight:700;letter-spacing:-.01em}
h1,.head .who,.biz{letter-spacing:-.01em}

/* Labels in sentence case, not tracked capitals. */
.mast,.mast span,h2,h3,th,.tag,.card .tag,.badge,.arch,.grp>h3,.kv dt,#scriptview h2{
  text-transform:none;letter-spacing:0}
.mast{font-size:15px;font-weight:700;color:var(--signal)}
.grp>h3,h3{font-size:15px;font-weight:700;color:var(--ink)}
.grp.today>h3{color:var(--signal)}
.kv dt{font-size:13px;font-weight:600}
th{font-size:13px;font-weight:600}

/* Corners follow what a thing is: panels 14, cards 12, controls 10, chips round. */
.card,.sec,.panel,.tablewrap,.costs,.head,.read,#scriptview,.confirm .box,.sheet .box,.row{border-radius:14px}
.wrap>.card,.narrow .card,body.inform .sec{border-radius:14px}
.grp .card,.card.past,.tile{border-radius:12px}
input,select,textarea,button,.btn,.closebtn,.addrow,.step2act button,.tiers button,.slot{border-radius:10px}
.tag,.badge,.card .tag{border-radius:999px;padding-left:10px;padding-right:10px}
.fact,.warn,.cand,.themelist .t,.err,.said{border-radius:0 10px 10px 0}
.bar,.bar i,.meter,.meter i{border-radius:999px}
.tablewrap,.sec{overflow:hidden}

/* One soft lift, on the main panel of each page only. */
.wrap>.card,.narrow .card,#panel,.head{box-shadow:var(--lift)}
.sec,.costs,.tablewrap,.read,#scriptview,.grp .card{box-shadow:none}

/* Fields. */
input,select,textarea{background:var(--field);border:1px solid var(--rule);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--signal);outline-offset:-1px;background:#fff}

/* Buttons. The main action is outlined in sage and fills when pressed toward;
   secondary actions are quiet. */
button.go,.card button,.btn,.closebtn{
  background:var(--surface);color:var(--signal);border:2px solid var(--signal);font-weight:600}
button.go:hover,.card button:hover,.btn:hover,.closebtn:hover{background:var(--signal);color:#fff;opacity:1}
button.plain,.btn.ghost,.closebtn.ghostbtn,.addrow,.step2act button,.tiers button{
  background:var(--surface);color:var(--ink);border:1px solid var(--rule);font-weight:600}
button.plain:hover,.btn.ghost:hover,.closebtn.ghostbtn:hover,.addrow:hover,.step2act button:hover,.tiers button:hover{
  border-color:var(--signal);color:var(--signal);background:var(--surface)}
.grp .card{border:1px solid var(--rule);background:var(--surface);color:var(--ink)}
.arch,.fold{border-radius:0}
.mast span{font-weight:500;color:var(--muted)}
.grp .card:hover{border-color:var(--signal)}
.linkish,.back,.backlink,.undo,.links a,a{color:var(--signal)}

/* Progress in honey, done in green. */
.bar{background:var(--honey-soft)}
.bar i,.meter i{background:var(--honey)}
.meter{background:var(--honey-soft)}
.sec.done .tick{border-color:#35A160;background:#35A160;color:#fff;box-shadow:0 0 0 3px #DDF2E4}
.step.done .num{border-color:var(--good);background:var(--good);color:#fff}
.step.done .sub{color:var(--good)}
.q .saved{color:var(--good)}

/* Status chips. */
.tag.client,.tag.confirmed,.tag.agent-resolved{background:var(--good-soft);border-color:transparent;color:var(--good)}
.tag.retainer{background:var(--honey-soft);border-color:transparent;color:var(--caution)}
.tag.lead,.tag.dormant{background:var(--paper);border-color:var(--rule);color:var(--muted)}
.tag.candidates,.tag.none{background:var(--honey-soft);border-color:transparent;color:var(--caution)}
.badge{background:var(--good-soft);border-color:transparent;color:var(--good)}
.badge.candidates,.badge.none,.badge.soft-association,.badge.incomplete{background:var(--honey-soft);color:var(--caution)}

/* Messages. Waiting on someone reads coral, done reads green. */
.err,.warn{background:var(--flag-soft);border-left:3px solid var(--flag);color:var(--flag)}
.said{background:var(--good-soft);border-left:3px solid var(--good);color:var(--good)}
.bad{color:var(--flag)}

/* Surfaces that were hard-coded cool greys. */
tr.row:hover td{background:#FAF8F1}
tr.row.sel td{background:#EFEBDD}
.slot{background:var(--field)}
.slot.over{background:var(--signal-soft)}
.row{background:var(--field)}
#scriptview blockquote{background:var(--signal-soft);border-left-color:var(--signal)}
.fact.prov{background:var(--honey-soft)}
.confirm{background:rgba(38,48,42,.45)}
.verdict{border-top-color:var(--signal)}
.read{border-left-color:var(--signal)}
.themelist .t,.fact.verified{border-left-color:var(--signal)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* The client form's title row shares the .head class with the brief header; it is not a panel. */
body.inform .head{box-shadow:none;border-radius:0;background:none}
/* Text links that happen to be buttons stay text links. */
.card button.linkish,.card button.linkish:hover{background:none;border:0;border-radius:0;color:var(--signal);font-weight:400;padding:8px 0}