/* ===========================================================================
   REcall — THE BRAND LAYER (Mike, Sept 25, 2026)

   "Copy the same theme as thepescelanzillottagroup.com." Read from Mike's
   screenshots of the site: near-black and white, one gold gradient, a
   geometric sans (DM Sans) with an ultra-thin high-contrast serif (Italiana)
   for accents, gold hairline + letterspaced caps "eyebrows", square corners.
   REcall carries its own mark (the gold RE monogram Mike supplied).

   Loaded LAST on every page, so it only restyles - no page logic depends on
   it, and deleting the <link> puts every page back exactly as it was.
   Colours still resolve through the same variable names the pages use.
   =========================================================================== */

:root{
  --f-ui:'DM Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-display:'Italiana','Didot','Bodoni 72',Georgia,serif;

  --gold-grad:linear-gradient(135deg,#F4DE9C 0%,#E4C272 42%,#C99F48 100%);
  --gold-grad-hover:linear-gradient(135deg,#F7E6B2 0%,#EACB7E 42%,#D1A852 100%);

  /* light: white paper, black ink, gold for what matters */
  --bg:#FAFAF8; --panel:#FFFFFF; --panel2:#F5F3EF; --sunken:#F5F3EF; --line:#E7E3DC;
  --text:#111111; --muted:#6F6B64; --accent:#111111; --on-accent:#FFFFFF;
  --gold:#D8B460; --gold-mid:#C29A45; --gold-ink:#8C6A28; --gold-rule:#E3CD94;
  --rail:#0F0F0F; --rail-fg:#F4F2EE;
  --good:#8C6A28; --good-bg:#F7F0DF; --good-fg:#8C6A28;
  --toast-bg:#0F0F0F; --toast-fg:#F4F2EE; --toast-line:#0F0F0F;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F0F0F; --panel:#161615; --panel2:#1C1B1A; --sunken:#131312; --line:#2A2825;
    --text:#F4F2EE; --muted:#9E998F; --accent:#E4C272; --on-accent:#0F0F0F;
    --gold:#E4C272; --gold-mid:#E4C272; --gold-ink:#E9CD86; --gold-rule:#6E5A2E;
    --rail:#0A0A0A; --rail-fg:#F4F2EE;
    --good:#E4C272; --good-bg:#2A2416; --good-fg:#E9CD86;
    --toast-bg:#1C1B1A; --toast-fg:#E9CD86; --toast-line:#3A3320;
  }
}
:root[data-theme="dark"]{
  --bg:#0F0F0F; --panel:#161615; --panel2:#1C1B1A; --sunken:#131312; --line:#2A2825;
  --text:#F4F2EE; --muted:#9E998F; --accent:#E4C272; --on-accent:#0F0F0F;
  --gold:#E4C272; --gold-mid:#E4C272; --gold-ink:#E9CD86; --gold-rule:#6E5A2E;
  --rail:#0A0A0A; --rail-fg:#F4F2EE;
  --good:#E4C272; --good-bg:#2A2416; --good-fg:#E9CD86;
  --toast-bg:#1C1B1A; --toast-fg:#E9CD86; --toast-line:#3A3320;
}

/* ---- Type ------------------------------------------------------------------ */
html,body{font-family:var(--f-ui);-webkit-font-smoothing:antialiased;letter-spacing:.005em}
input,select,textarea,button{font-family:var(--f-ui)}
/* figures: the site's light, wide numerals - lined up in columns */
.ser,.stat .v,.money-big,.count,.num,td.num,th.num{
  font-family:var(--f-ui);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
.stat .v,.money-big{font-weight:300;letter-spacing:-.01em}
/* names of things - addresses, documents, folders - in the thin serif, as the
   site sets its property names */
.card .addr,.doc .n,.folder-head .fh-t,.studio h2,.gate-card h2{
  font-family:var(--f-display);font-weight:400;letter-spacing:.01em}

/* ---- The black bar --------------------------------------------------------- */
header.top{background:var(--rail);border-bottom:1px solid rgba(228,194,114,.18);min-height:72px;padding:0 28px;gap:28px}
header.top > div:first-child{display:grid!important;grid-template-columns:44px auto;grid-template-rows:auto auto;
  column-gap:12px;align-items:center;align-content:center;padding:12px 0}
header.top > div:first-child::before{content:"";grid-row:1 / span 2;width:44px;height:44px;
  background:url(recall-mark.png) center/contain no-repeat}
header.top .brand-name{font-family:var(--f-ui);font-weight:500;font-size:21px;line-height:1;align-self:end;
  letter-spacing:-.01em;color:var(--rail-fg)}
header.top .brand-name .re{color:#E4C272}
header.top .brand-sub{font-family:var(--f-ui);color:#C9A95E;font-size:9.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;margin-top:5px;align-self:start}
.topnav{gap:26px}
.topnav > a{font-family:var(--f-ui);font-size:14px;font-weight:400;letter-spacing:.01em;
  text-transform:none;color:#E9E6E0;border-bottom:1.5px solid transparent}
.topnav > a:hover{color:#FFFFFF;border-bottom-color:rgba(228,194,114,.5)}
.topnav > a.on{color:#FFFFFF;border-bottom:1.5px solid #E4C272}
.who{color:#A8A399}
.who a{color:#E4C272}
.theme-btn{background:transparent;border:1px solid rgba(255,255,255,.22);color:#E9E6E0;
  font-weight:500;letter-spacing:.04em}
.theme-btn:hover{border-color:#E4C272;color:#FFFFFF}

/* ---- Buttons: gold for the one thing you came to do ------------------------ */
button{border-radius:0;font-weight:500;letter-spacing:.02em}
button:not(.ghost,.danger,.theme-btn,.sm,.link,.del,.rm,.tier-x,[data-pickrm],.tabs button,.chip-pick button,.thumb button,.lesson .adm button){
  background:var(--gold-grad);color:#111111;border:0;box-shadow:none}
button:not(.ghost,.danger,.theme-btn,.sm,.link,.del,.rm,.tier-x,[data-pickrm],.tabs button,.chip-pick button,.thumb button,.lesson .adm button):hover{background:var(--gold-grad-hover)}
button.sm:not(.ghost):not(.danger){background:#111111;color:#FFFFFF}
:root[data-theme="dark"] button.sm:not(.ghost):not(.danger){background:var(--gold-grad);color:#111111}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) button.sm:not(.ghost):not(.danger){background:var(--gold-grad);color:#111111} }
button.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
button.ghost:hover{border-color:var(--gold-mid)}

/* ---- Forms ----------------------------------------------------------------- */
input,select,textarea{background:var(--panel);border:1px solid var(--line);border-radius:0;font-size:14.5px}
input:focus,select:focus,textarea:focus{border-color:var(--gold-mid);outline:none;box-shadow:0 0 0 3px rgba(216,180,96,.16)}
input[readonly]{background:var(--panel2)}
label{font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---- Tabs and panels ------------------------------------------------------- */
.tabs{gap:30px;border-bottom:1px solid var(--line)}
header.top ~ .tabs{padding:22px 28px 0;margin:0}
.wrap > .tabs{padding:0;margin:0 0 18px}
.tab,.mode-tab,.tabs button{background:none!important;border:0!important;border-radius:0!important;padding:10px 0 12px;
  font-family:var(--f-ui);font-size:15px;font-weight:400;color:var(--muted);
  border-bottom:1.5px solid transparent!important;margin-bottom:-1px}
.tab:hover,.mode-tab:hover,.tabs button:hover{color:var(--text)}
.tab.on,.mode-tab.on,.tabs button.on{color:var(--text)!important;font-weight:500;border-bottom:1.5px solid var(--gold-mid)!important}
.wrap{padding:22px 28px 48px}
.pane{border-radius:0;border:0;background:transparent;padding:0}

/* ---- Section heads: the site's gold hairline eyebrow ------------------------ */
.section-h{font-family:var(--f-ui)!important;font-weight:500!important;font-size:25px!important;
  letter-spacing:-.015em!important;border-bottom:0!important;padding-bottom:0!important;margin:34px 0 16px!important}
.section-h::before{content:"";display:block;width:34px;height:1.5px;background:var(--gold-grad);margin:0 0 12px}

/* ---- The cards ------------------------------------------------------------- */
.stats{gap:0!important;border:1px solid var(--line);border-right:0;border-bottom:0;background:var(--panel);margin-bottom:22px;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr))!important}
.stat{background:transparent!important;border:0!important;border-right:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;padding:16px 18px 17px!important;border-radius:0!important;position:relative}
.stat .k{font-size:10px!important;font-weight:500;letter-spacing:.16em!important;color:var(--muted)!important}
.stat .v{font-size:22px!important;margin-top:7px!important;color:var(--text);white-space:nowrap}
:root[data-theme="dark"] .stat .v{color:#E9CD86}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .stat .v{color:#E9CD86} }

/* ---- Tables ---------------------------------------------------------------- */
table{border-collapse:collapse}
th{font-family:var(--f-ui);font-size:10px!important;font-weight:500!important;letter-spacing:.14em!important;
  text-transform:uppercase;color:var(--muted)!important;border-bottom:1px solid var(--text)!important}
td{border-bottom:1px solid var(--line)}
tr.row:hover td{background:rgba(216,180,96,.07)}

/* ---- Status tags: gold for Active, as on the site's listings ----------------- */
.pill{border-radius:0;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px}
.pill.active{background:var(--gold-grad);color:#111111}
.pill.closed{background:#111111;color:#E4C272}
.pill.pending{background:transparent;color:var(--gold-ink);box-shadow:inset 0 0 0 1px var(--gold-mid)}

/* ---- Sign-in screens: the mark on black ------------------------------------ */
#gate,#denied{background:var(--rail)!important}
.gate-card{border:0;border-top:2px solid #D8B460;padding:32px 30px 28px}
.gate-card::before{content:"";display:block;width:132px;height:168px;margin:0 auto 14px;
  background:url(recall-logo-light.png) center/contain no-repeat}
:root[data-theme="dark"] .gate-card::before{background-image:url(recall-logo.png)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .gate-card::before{background-image:url(recall-logo.png)} }
.gate-card h2{font-size:30px}

/* ---- Small screens ----------------------------------------------------------- */
@media(max-width:640px){
  header.top{padding:6px 14px;min-height:0}
  header.top > div:first-child::before{width:34px;height:34px}
  .tabs{gap:18px}
  header.top ~ .tabs{padding:14px 14px 0}
  .wrap{padding:16px 12px 40px}
}
:root[data-theme="dark"] .pill.closed{box-shadow:inset 0 0 0 1px #6E5A2E}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pill.closed{box-shadow:inset 0 0 0 1px #6E5A2E} }

/* ---- The card rows (Sept 25): Deals / Money / Workflow, each row full width - */
.stats.grouped{display:block!important;border:0!important;background:transparent!important;margin-bottom:26px}
.stat-line{gap:22px;margin-bottom:18px}
.stat-group-h{font-size:10px;font-weight:500;letter-spacing:.22em;color:var(--gold-ink);margin:0 0 8px;
  display:flex;align-items:center;gap:10px}
.stat-group-h::before{content:"";width:18px;height:1.5px;background:var(--gold-grad)}
.stat-cells{gap:0!important;border:1px solid var(--line);border-right:0;border-bottom:0;background:var(--panel)}
.stat-cells .stat .v{font-size:clamp(17px,1.45vw,22px)!important}

/* ---- Goal, forecast and pipeline boxes read like the cards ------------------- */
.goals{gap:12px}
@media(min-width:901px){ .goals{grid-template-columns:repeat(3,minmax(0,1fr))!important} }
.goal,.fc-big,.big{border-radius:0}
.goal .gt,.fc-big .k,.big .k{font-size:10px!important;font-weight:500!important;letter-spacing:.16em!important;color:var(--muted)}
.goal .gv,.fc-big .v,.big .v{font-family:var(--f-ui);font-weight:300!important;letter-spacing:-.01em;
  font-variant-numeric:lining-nums tabular-nums}
.goal .gv{font-size:26px!important}
.fc-big .v,.big .v{font-size:28px!important}
.goal .bar{border-radius:0}
.stats.grouped{margin-top:12px}