/* ============================================================================
   SetAside AI — shared ambient backdrop + dark surface theme
   ----------------------------------------------------------------------------
   ONE file, loaded by every page. Include it as the LAST thing in <head>, after
   the page's own inline <style>, together with assets/backdrop.js:

     <link rel="stylesheet" href="/assets/backdrop.css">
     <script src="/assets/backdrop.js" defer></script>

   Why this works with no build step: every page declares the same :root token
   block (--paper / --ink / --rule / --gold ...). Redefining those tokens here
   re-themes each page wholesale without editing its CSS. Only the handful of
   hardcoded light colours (#fff, #FFFDF8 …) need naming explicitly, in §5.

   The decorative markup is injected by backdrop.js. Everything it creates is
   pointer-events:none and sits at z-index:-1, so it can never intercept a
   click, a filter change, or a form field. If the script does not run, the page
   is still a correct dark page — it just loses the ornament.

   Brand note: teal (#4fd1c5) lives ONLY in the backdrop. Gold (#B8912E) remains
   the UI accent — buttons, chips, section numbers, CTA — so the tokens below
   deliberately leave --gold and --gold-deep untouched.
   ========================================================================== */

/* ── 1. Tokens ──────────────────────────────────────────────────────────────
   The pages' own :root block is defined earlier in the cascade, so these win
   at equal specificity by source order.                                      */
:root{
  /* Surfaces. --paper goes transparent so the backdrop shows through body. */
  --paper: transparent;
  --paper-2: rgba(10,20,42,.55);

  /* Type. */
  --ink: #e8eefb;
  --ink-2: rgba(210,224,245,.72);

  /* Rules/borders — the old warm greys would glow against navy. */
  --rule: rgba(125,165,220,.16);
  --rule-dark: rgba(125,165,220,.30);

  /* --dark and --gold are intentionally NOT overridden — gold stays the UI accent.

     --gold-deep is. On cream it was the "darker gold" used for small accent
     text and link hovers; on navy that reads at 4.09:1, under AA. Lifting it to
     a brighter gold takes it to ~8:1 and fixes all 34 text uses at once. Its
     other job — the hover fill behind white button labels — needs the OPPOSITE
     direction, so those ten selectors are pinned to a dark gold in §10. */
  --gold-deep: #d9ae47;

  /* Gold surfaces carry a DARK label, not white — see §12. The label colour is
     the page's own base navy, so a gold button reads as a lit panel cut out of
     the background. Hover brightens (a dark label wants more light, not less). */
  --sa-on-gold:     #0a132b;
  --sa-gold-hover:  #d2a63c;

  /* Backdrop palette (decorative only). */
  --sa-base:      #0a132b;
  --sa-accent:    #4fd1c5;
  --sa-blue:      #60a5fa;
  --sa-sky:       #7dd3fc;
  --sa-sky-hover: #a5f3fc;
  --sa-surface:   rgba(10,20,42,.55);
  --sa-line:      rgba(125,165,220,.16);
  --sa-grid:      rgba(125,165,220,.55);
}

/* ── 2. Canvas ──────────────────────────────────────────────────────────────
   html carries the flat base so there is never a flash of white before
   backdrop.js runs; the gradient itself is layer 1 on .sa-bd.               */
html{ background: var(--sa-base); }
body{ background: transparent; color: var(--ink); }

::selection{ background: var(--sa-accent); color: #04121f; }

/* ── 3. Backdrop layers ─────────────────────────────────────────────────────
   Injected by backdrop.js as the first child of <body>.                      */
.sa-bd{
  position: fixed; inset: 0;
  z-index: -1;                 /* behind all content, above the root canvas */
  pointer-events: none;        /* nothing here is ever interactive */
  overflow: hidden;            /* oversized rings must not create scrollbars */
  background: linear-gradient(175deg, #0c1a36 0%, #0a132b 45%, #0e2044 100%);
}
.sa-bd > *{ position: absolute; inset: 0; pointer-events: none; }

/* 3.2 gradient mesh — three soft glows */
.sa-bd__mesh{
  background:
    radial-gradient(60vw 55vh at 82% 12%,  rgba(37,99,235,.16), transparent 70%),
    radial-gradient(55vw 52vh at 12% 88%,  rgba(13,148,136,.10), transparent 70%),
    radial-gradient(70vw 46vh at 50% 104%, rgba(30,64,175,.14), transparent 70%);
}

/* 3.3 / 3.4 grids — fine 56px, major 280px, both faded out at the edges */
.sa-bd__grid,
.sa-bd__grid--major{
  background-image:
    linear-gradient(to right,  var(--sa-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sa-grid) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 45%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 100% 100% at 50% 45%, #000 30%, transparent 100%);
}
.sa-bd__grid{        background-size: 56px 56px;   opacity: .12;  }
.sa-bd__grid--major{ background-size: 280px 280px; opacity: .085; }

/* 3.5 blueprint marks */
.sa-bd__ring{
  inset: auto; right: -14vw; top: -16vw;
  width: 56vw; height: 56vw; border-radius: 50%;
  border: 1px solid rgba(94,156,230,.14);
}
.sa-bd__ring::before{                       /* dashed inner circle */
  content: ""; position: absolute; inset: 13%;
  border: 1px dashed rgba(94,156,230,.12); border-radius: 50%;
}
.sa-bd__ring::after,                        /* crosshair — horizontal */
.sa-bd__ring > i{                           /* crosshair — vertical   */
  content: ""; position: absolute; top: 50%; left: 50%;
  background: rgba(94,156,230,.22);
}
.sa-bd__ring::after{ width: 34px; height: 1px; transform: translate(-50%,-50%); }
.sa-bd__ring > i{    width: 1px; height: 34px; transform: translate(-50%,-50%); }

.sa-bd__arc{                                /* teal arc fragment, lower left */
  inset: auto; left: -18vw; bottom: -20vw;
  width: 44vw; height: 44vw; border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: rgba(45,168,165,.16);
  border-right-color: rgba(45,168,165,.16);
  transform: rotate(18deg);
}

.sa-bd__tick{ inset: auto; width: 22px; height: 22px; border: 0 solid rgba(125,180,240,.3); }
.sa-bd__tick--tl{ top: 18px;    left: 18px;  border-top-width: 1px;    border-left-width: 1px;  }
.sa-bd__tick--tr{ top: 18px;    right: 18px; border-top-width: 1px;    border-right-width: 1px; }
.sa-bd__tick--bl{ bottom: 18px; left: 18px;  border-bottom-width: 1px; border-left-width: 1px;  }
.sa-bd__tick--br{ bottom: 18px; right: 18px; border-bottom-width: 1px; border-right-width: 1px; }

.sa-bd__plate{
  inset: auto; left: 46px; bottom: 15px;
  font: 11px/1.4 "Courier New", ui-monospace, monospace;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(148,190,240,.6); white-space: nowrap;
}

/* 3.6 data-flow lines */
.sa-bd__flow{ inset: -25% -12%; transform: rotate(-14deg); }
.sa-bd__line{ position: absolute; left: 0; right: 0; height: 1px; }
.sa-bd__line--1{ top: 28%; background: linear-gradient(90deg, transparent, rgba(79,209,197,.28), transparent); }
.sa-bd__line--2{ top: 52%; background: linear-gradient(90deg, transparent, rgba(96,165,250,.22), transparent); }
.sa-bd__line--3{ top: 74%; background: linear-gradient(90deg, transparent, rgba(45,168,165,.18), transparent); }
.sa-bd__node{
  position: absolute; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%;
  background: var(--sa-accent); box-shadow: 0 0 12px 2px rgba(79,209,197,.35);
}
.sa-bd__line--1 .sa-bd__node{ left: 38%; }
.sa-bd__line--2 .sa-bd__node{ left: 62%; width: 4px; height: 4px; }
.sa-bd__line--3 .sa-bd__node{ left: 47%; }

/* 3.8 vignette — keeps the edges quiet, sits above the other decoration */
.sa-bd__vig{
  background: radial-gradient(ellipse 120% 100% at 50% 40%, transparent 55%, rgba(4,8,18,.55) 100%);
}

/* ── 4. Motion (layer 7) ────────────────────────────────────────────────────
   Hidden by default. It appears only on viewports ≥768px AND only when the
   visitor has expressed no preference against motion — so phones (where this
   costs the most and shows the least) and reduced-motion users skip the work
   entirely rather than merely pausing it.                                    */
.sa-bd__motion{ display: none; }

@media (min-width: 768px) and (prefers-reduced-motion: no-preference){
  .sa-bd__motion{ display: block; }

  .sa-bd__drift{ position: absolute; border-radius: 50%; }
  .sa-bd__drift--1{
    width: 46vw; height: 46vw; top: -8vw; right: 4vw;
    background: radial-gradient(circle, rgba(37,99,235,.10), transparent 70%);
    animation: sa-drift-1 26s ease-in-out infinite;
  }
  .sa-bd__drift--2{
    width: 40vw; height: 40vw; bottom: -6vw; left: 2vw;
    background: radial-gradient(circle, rgba(13,148,136,.09), transparent 70%);
    animation: sa-drift-2 34s ease-in-out infinite;
  }
  .sa-bd__scan{
    position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(79,209,197,.22), transparent);
    animation: sa-scan 18s linear infinite;
  }
  .sa-bd__node--pulse{ animation: sa-pulse 6s ease-in-out infinite; }

  @keyframes sa-drift-1{
    0%,100%{ transform: translate3d(0,0,0); }
    50%    { transform: translate3d(-56px, 42px, 0); }
  }
  @keyframes sa-drift-2{
    0%,100%{ transform: translate3d(0,0,0); }
    50%    { transform: translate3d(50px, -38px, 0); }
  }
  @keyframes sa-scan{
    0%   { transform: translate3d(0,0,0);      opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translate3d(0,100vh,0);  opacity: 0; }
  }
  @keyframes sa-pulse{
    0%,100%{ opacity: .18; }
    50%    { opacity: .45; }
  }
}

/* ── 5. Surfaces that were hardcoded light ──────────────────────────────────
   The token swap in §1 handles everything expressed as var(--paper) etc.
   These selectors carried literal #fff / #FFFDF8 and must be named.          */
.specimen, .plan, .plan.founding,                 /* index  */
.filters, .feature,                               /* search */
.gng-box,                                         /* opp    */
.card, .plancard, .rec, .mw, .tagbox, .seg, .st,  /* dashboard */
.pill, .check, .toggle .box{
  background: var(--sa-surface);
  border-color: var(--sa-line);
  border-radius: 12px;
}

/* backdrop-filter is expensive and is reserved for the few large panels — NOT
   list rows, which can number in the hundreds on the search page. */
.specimen, .plan, .filters, .feature, .gng-box, .plancard{
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

/* dashboard's stats board is .hero; index's .hero is an unstyled layout
   section, so this must not be global. */
[data-sa="dashboard"] .hero{
  background: var(--sa-surface);
  border-color: var(--sa-line);
  border-radius: 12px;
}

.item:hover{ background: rgba(125,165,220,.06); }   /* search rows — no blur */

/* Panels that sat on the warm second paper tone. */
.rail-slot, .rail-card{ background: var(--sa-surface); border-color: var(--sa-line); }

/* ── 6. Form controls ───────────────────────────────────────────────────────*/
/* background-COLOR, never the `background` shorthand: the shorthand also resets
   background-repeat/position, which would tile select's caret SVG across the
   whole control. */
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=password], input[type=search], select, textarea{
  background-color: rgba(8,16,34,.6);
  color: var(--ink);
  border-color: var(--sa-line);
}
input:focus, select:focus, textarea:focus{
  background-color: rgba(8,16,34,.85);
  border-color: var(--sa-accent);
}
::placeholder{ color: rgba(210,224,245,.45); }

/* the inline caret SVG in search.html is dark grey — relight it, and restate
   repeat/position so the rule stands on its own wherever it lands. */
select{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M0 0l5 7 5-7z' fill='%2394BEF0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
/* native date/time widgets render a black glyph on dark by default */
input[type=date]::-webkit-calendar-picker-indicator{ filter: invert(1) opacity(.55); }

option{ background: #0d1c38; color: var(--ink); }

/* ── 7. Links ───────────────────────────────────────────────────────────────
   Only unclassed links — buttons, nav items and chips keep their own colour
   (and their gold), which is the whole point of the brand decision.          */
a:not([class]){ color: var(--sa-sky); }
a:not([class]):hover{ color: var(--sa-sky-hover); }

/* ── 8. Danger / urgency text ───────────────────────────────────────────────
   Every page signalled "closing soon" or "error" with #8d2f14, a deep maroon
   chosen for cream. On navy it lands at 2.1:1 — unreadable. One lift covers all
   twelve selectors across the five files that use it.                        */
.chip.hot, .item .due .left.hot,                      /* search */
.due-hot,                                             /* opp    */
.msg.err, .err, .moderr,                              /* login / register / dashboard */
.statmeta .hot, .due.hot, .recamt.neg,                /* dashboard */
.iconbtn.danger:hover, .rm:hover, .tag button:hover{
  color: #ff8a6b;
}
.chip.hot{ border-color: rgba(255,138,107,.45); }
.flag .mark.req{ background: #b3452a; }               /* white-on-maroon badge */

/* ── 9. dashboard.html — class-scoped rules that out-specify §5/§6 ──────────
   The other pages style their controls by element (`input[type=text]{…}`), so
   the shared rules tie and win on source order. The dashboard styles them by
   class (`.ff select`, `.bidfld input:focus`, `.addbtn.ghost`), which is more
   specific and would keep `background:#fff` while inheriting the now-light
   --ink — i.e. white-on-white, invisible text on the paid customer's page.
   Scoping through [data-sa] adds the weight needed to win these back.        */

/* ghost/secondary buttons: white plate + var(--ink) label */
[data-sa="dashboard"] .addbtn.ghost,
[data-sa="dashboard"] .plancta.ghost,
[data-sa="dashboard"] .gngbtn,
[data-sa="dashboard"] .stagebtn,
[data-sa="dashboard"] .iconbtn{
  background: rgba(125,165,220,.10);
  color: var(--ink);
  border-color: var(--sa-line);
}
[data-sa="dashboard"] .addbtn.ghost:hover,
[data-sa="dashboard"] .plancta.ghost:hover,
[data-sa="dashboard"] .gngbtn:hover,
[data-sa="dashboard"] .stagebtn:hover,
[data-sa="dashboard"] .iconbtn:hover{
  background: rgba(125,165,220,.18);
  border-color: var(--sa-accent);
  color: var(--ink);
}
[data-sa="dashboard"] .iconbtn{ color: var(--ink-2); }
[data-sa="dashboard"] .stagebtn span{ color: var(--ink-2); }

/* form controls the element-level rules in §6 cannot reach */
[data-sa="dashboard"] .ff input,
[data-sa="dashboard"] .ff select,
[data-sa="dashboard"] .ff textarea,
[data-sa="dashboard"] .bidfld input,
[data-sa="dashboard"] .bidfld textarea{
  background: rgba(8,16,34,.6);
  color: var(--ink);
  border-color: var(--sa-line);
}
/* …including the focus state, which flipped the field back to solid white */
[data-sa="dashboard"] .ff input:focus,
[data-sa="dashboard"] .ff select:focus,
[data-sa="dashboard"] .ff textarea:focus,
[data-sa="dashboard"] .bidfld input:focus,
[data-sa="dashboard"] .bidfld textarea:focus{
  background: rgba(8,16,34,.85);
  border-color: var(--sa-accent);
  color: var(--ink);
}

[data-sa="dashboard"] .iconbtn.danger:hover{ border-color: #ff8a6b; }

/* ── 10. Gold button hover fill ─────────────────────────────────────────────
   With a dark label (§12) the hover has to brighten rather than darken. These
   are the five selectors that used --gold-deep as a fill; §1 brightened that
   token for text use, so they are pinned here explicitly.                    */
.btn-gold:hover,
[data-sa="login"] .btn:hover,
[data-sa="dashboard"] .addbtn:hover,
[data-sa="dashboard"] .plancta:hover,
[data-sa="dashboard"] .save:hover{
  background: var(--sa-gold-hover);
  border-color: var(--sa-gold-hover);
  color: var(--sa-on-gold);
}

/* ── 11. Status badge fills ─────────────────────────────────────────────────
   .pill.on and .st.on set color:#fff, so each badge's legibility is decided by
   its fill. Three fills never carried white text well — measured 2.56:1 (low),
   2.95:1 (gold: proposal/preferred) and 3.30:1 (green: won/done/active). Badge
   text is ~9.6px bold, which is "small" under WCAG, so the bar is 4.5:1.

   This predates the dark theme; the fills are simply deepened until white text
   clears the bar. Hue and meaning are preserved, and the other six fills
   (slate, red, blue, purple, #B45309) already passed and are left alone.

   Scoped to the badges only — var(--gold) keeps its value everywhere else, so
   buttons and chrome are untouched.                                          */

/* priority "low" — deepened past medium's slate rather than toward it, so the
   urgent → high → medium → low ramp still reads as descending intensity. */
[data-sa="dashboard"] .pill.low{ background: #4E5F7A; }        /* 2.56 -> 6.48 */

/* proposal/preferred fill with var(--gold). They were briefly dulled to #8A6C1F
   to carry white text; §12 gives every gold surface a dark label instead, so
   they go back to the real brand gold and read better for it. */
[data-sa="dashboard"] .pill.proposal,
[data-sa="dashboard"] .pill.preferred{
  background: var(--gold);
  color: var(--sa-on-gold);                                     /* 2.95 -> 5.90 */
}

/* The success green (#16A34A) is 3.30:1 under white and is NOT dashboard-only:
   it also fills .verdict.go on opp.html and the "ok" flag on the search page's
   Fit Score card. Deepened once, unscoped, so every use is covered. */
.pill.won, .pill.done, .pill.active,
.st.on[data-s=won],
.verdict.go,
.flag .mark.ok{
  background: #11803B;                                          /* 3.30 -> 5.03 */
  border-color: #11803B;
}

/* ── 12. Anything filled with brand gold gets a dark label ──────────────────
   White on #B8912E is 2.95:1 — the primary CTA has never met AA, on cream or
   on navy. There were two ways out: dull the gold until white works (#8A6C1F,
   4.95:1) or keep the brand colour and darken the label. The second wins on
   both counts — 5.90:1, and #B8912E stays exactly what it has always been.

   The label is --sa-on-gold, the page's own base navy, so a gold surface reads
   as a lit panel cut out of the background rather than a sticker on top.
   Hover brightens to --sa-gold-hover (§10) instead of darkening.

   Not scoped to a page: gold buttons appear on all nine documents.           */
.btn-gold,
.spec-verdict .v,
.verdict.cond,
[data-sa="login"] .btn,
[data-sa="dashboard"] .addbtn,
[data-sa="dashboard"] .plancta,
[data-sa="dashboard"] .save,
[data-sa="dashboard"] .check.on,
[data-sa="dashboard"] .toggle .box.on{
  color: var(--sa-on-gold);
}

/* The header CTA is an <a> inside .nav-links, so `.nav-links a` (0,1,1) and
   `.nav-links a:hover` (0,2,1) out-specify `.btn-gold` (0,1,0) and win the
   colour — leaving the site's primary conversion button at 1.34:1 base and
   2.27:1 hover. That predates the dark theme: the label has always taken the
   nav's #9FB0CC rather than the button's own. Matched here at (0,2,1)/(0,3,1). */
.nav-links a.btn-gold,
.nav-links a.btn-gold:hover{ color: var(--sa-on-gold); }

/* The ghost/neutral variants share those class names but are NOT gold — they
   are restated here so the rule above cannot darken text on a dark plate.
   (.ghost is handled in §9; .isnow ties with the rule above on specificity and
   would otherwise lose on source order.) */
[data-sa="dashboard"] .plancta.isnow{ color: var(--ink-2); }
[data-sa="dashboard"] .seg.on{ color: #fff; }   /* fills with --dark, not gold */

/* ── 13. Odds and ends the token swap cannot reach ──────────────────────────*/
.btn-line{ color: var(--ink); border-color: var(--sa-line); }
.btn-line:hover{ background: rgba(125,165,220,.10); }
.strike{ color: rgba(210,224,245,.45); }
hr{ border-color: var(--sa-line); }
