/* ═══════════════════════════════════════════════════════════════════════════
   SYNAPSE APP THEME — warm, white, flat (2026-09-29)

   Eden, with a CRM screenshot as the reference: "the foreground is white with
   some orange elements the way it is in the image ... a sort of off-white
   tone in the background ... more colorful, but I don't want any gradients.
   I want it to be more professionally looking, look like it was designed by
   a human being."

   Sampled from the reference: a warm off-white ground (#FAF5EE), a sand
   header (#F7EBDF), white working surfaces, pale peach under icons
   (#FDF3E6), warm hairlines rather than grey ones, orange as the one accent,
   and flat colour everywhere -- no glass, no glow.

   Loaded LAST on every app page except sign-in (which Eden asked to keep as
   it was), so it wins over each page's own style block without !important,
   except where it switches something off everywhere (glass, the grain).

   ORANGE STILL NEVER CARRIES WORDS (app.css, brand system: #FF8A2D is 2.2:1
   on white). It fills, marks, underlines and colours icons; the reference's
   orange tab label becomes a charcoal label with an orange marker.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --canvas:      #FAF6F0;   /* the ground: warm off-white */
  --canvas-2:    #F4ECE2;   /* trays and strips that sit on the ground */
  --sand:        #F7EBDF;   /* the app bar */
  --line:        #ECE2D6;   /* hairlines: warm, not grey */
  --line-2:      #E1D3C2;   /* stronger edge: inputs, hover */
  --peach:       #FDF1E3;   /* behind icons */
  --accent-tint: #FFE9D6;   /* active fills */
  --badge:       #D9434A;   /* counts that need attention; white on it is 4.6:1 */
  --flat-shadow: 0 1px 2px rgba(74, 52, 30, 0.05);

  /* The existing tokens, pointed at the new ground and edges. */
  --bg: var(--canvas);
  --cloud: var(--canvas);
  --surface: #FFFFFF;
  --glass: #FFFFFF;
  --border: var(--line);
  --border-strong: var(--line-2);
  --border-glass: var(--line);
  --mist: var(--line);
  --brand-tint: var(--canvas-2);
  --grad-glow: var(--orange);
  --grad-depth: var(--graphite);
  --surface-2: #FBF7F2;         /* raised / hover on a surface */
  --btn-solid-bg: var(--charcoal);
  --btn-solid-fg: #FFFFFF;
  --ink-dim-strong: #616161;    /* quiet text on the warm trays */
}

html, body { background: var(--canvas); }

/* No grain, no glass. The grain made the ground read grey; frosted glass
   over a flat ground is just a blurred grey box. */
body::before, body::after { content: none !important; }
*, *::before, *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ── surfaces ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--flat-shadow);
}
.appbar {
  background: var(--sand);
  border-bottom: 1px solid var(--line-2);
}

/* ── controls ─────────────────────────────────────────────────────────────── */
.btn-primary, .btn-primary:hover, .btn-primary:active { box-shadow: none; }

/* App bar controls: surfaces like everything else in front of the ground. */
.topsearch, .appbar .bell { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-ghost {
  background: var(--surface);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--line-2); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea {
  border-color: var(--line-2);
}

/* Segmented control: a warm strip, the chosen option a white pill with an
   orange marker -- the reference's active tab, with the word left charcoal. */
.seg { background: var(--canvas-2); }
.seg-b.on { background: var(--surface); box-shadow: var(--flat-shadow); }
.seg-b.on::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange); margin-right: 7px; vertical-align: 1px;
}
.ovtab.on { border-bottom-color: var(--orange); }

.bell-badge { background: var(--badge); color: #FFFFFF; }

/* ══ AGENCY PORTAL ══════════════════════════════════════════════════════════ */
body.portal .content { background: var(--canvas); }
body.portal .side {
  background: var(--surface);
  border-right: 1px solid var(--line);
}
body.portal .side a.on { background: var(--accent-tint); color: var(--charcoal); }
body.portal .side a.on .syn-i { color: var(--orange); opacity: 1; }
body.portal .side a:hover:not(.on) { background: var(--canvas); }

/* Page-level tools, search, tiles and tables: white on the ground. */
body.portal .content :is(.crm-tools, .pane-search, .pr-table-wrap, .s-tile, .ag-kpi, .stat) {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--flat-shadow);
}
body.portal .content .card :is(.crm-tools, .pane-search, .s-tile, .ag-kpi, .stat) { box-shadow: none; }

/* The verification checklist was rows on the bare page. */
body.portal .content #vfBody {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2px 20px; box-shadow: var(--flat-shadow);
}
body.portal .content #vfBody > .vf-row:first-child { border-top: none; }

/* Empty states: a white card, the icon on a peach disc in orange. */
body.portal .ov-blank {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--flat-shadow);
}
body.portal .content .card .ov-blank { border: none; box-shadow: none; }
body.portal .ov-blank .ov-blank-i {
  width: 56px; height: 56px; border-radius: 50%; opacity: 1;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px;
  background: var(--peach); color: var(--orange);
}
body.portal .ov-blank .ov-blank-i .syn-i { width: 24px; height: 24px; }
body.portal .bk-empty { background: var(--surface); border: 1px solid var(--line); }
body.portal .insight-empty { border-style: solid; background: var(--surface); }

/* The content pipeline: warm trays holding white cards. */
body.portal .col {
  background: var(--canvas-2);
  border: 1px solid var(--line);
  box-shadow: none;
}
body.portal .col .ct { background: var(--surface); color: var(--charcoal); }
body.portal .pcard { border-color: var(--line); box-shadow: var(--flat-shadow); }
body.portal .col-blank { background: var(--surface); border: 1px solid var(--line); }
body.portal .col-blank .col-blank-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; opacity: 1;
  background: var(--peach); color: var(--orange);
}

/* The portal's decorative gradients, made flat. (Photo scrims, the loading
   shimmer, rating stars and brand logos keep theirs: those are doing a job.) */
body.portal .roi { background: var(--peach); border-color: var(--line); }
body.portal .brand-hero { background: var(--surface); }
body.portal .sec.nba { background: var(--peach); border-color: var(--line-2); }
body.portal .acard .topbadge { background: #C9A227; }
body.portal .lbribbon::after { content: none; }

/* The "Tayo has no way to reach you" notice: a white card with an orange
   bar, not a black slab. Still the loudest thing on the page, but in the
   page's own colours. */
body.portal .need-phone {
  background: var(--surface); color: var(--charcoal);
  border: 1px solid var(--line); border-left: 4px solid var(--orange);
  box-shadow: var(--flat-shadow);
}
body.portal .need-phone .np-txt span { color: var(--ink-muted); }
body.portal .need-phone input {
  border: 1px solid var(--line-2); background: var(--surface); color: var(--charcoal);
}
body.portal .need-phone input::placeholder { color: var(--ink-dim); }
body.portal .need-phone button { background: var(--btn-solid-bg); color: var(--btn-solid-fg); }
body.portal .need-phone .np-err { color: var(--error-ink); }

/* Plans: the recommended one on a warm tint, its tag in the brand orange
   with a graphite label (orange buttons and tags carry graphite, 8.25:1). */
body.portal .pr-head.feature, body.portal .pr-cell.feature { background: var(--peach); }
body.portal .pr-pop { background: var(--orange); color: var(--graphite); }

/* ══ CUSTOMER PAGES ═════════════════════════════════════════════════════════
   Tayo and Your matches do NOT load this file. Eden, on seeing them flat:
   go back to the photograph, the glass and the bubbles. They keep their own
   look and take dark mode from theme-night.css and scene.css. The other
   customer pages are off-white with white on it; any photograph or wash one
   of them carries steps aside. */
/* Elements only: Your data puts bg-wash on <body> itself, and hiding that
   hid the whole page. */
div:is(.tj-bg, .tj-wash, .bg-scene, .bg-wash) { display: none !important; }
/* The customer pages' own top navigation: the current page on the warm
   tint, its icon in orange, like the portal's menu. */
.appbar nav a.active { background: var(--accent-tint); color: var(--charcoal); }
.appbar nav a.active :is(.nav-i, .syn-i) { color: var(--orange); }

/* Measured, not assumed: the quiet grey (#717171) is 4.17:1 on the warm
   trays and 4.39:1 on the peach plan column. Inside those two it is
   darkened to clear 4.5:1. */
body.portal .col,
body.portal :is(.pr-head, .pr-cell).feature { --ink-dim: var(--ink-dim-strong); }

/* The Tayo panel's header was a faint gradient; flat, like everything else. */
body.portal .tpanel .thd { background: var(--surface); }

body.portal .toju-fab {
  background: var(--charcoal) !important;
  color: var(--canvas) !important;
}
/* The Browse-style search bar was a gradient; flat. */
.searchbar { background-image: none !important; background-color: var(--surface); }