/* brand.css — the shared look for everything a paying customer sees.
   The internal tool (app.html) is a workbench; this is the product. Same
   signal-green identity, but calmer: more space, softer surfaces, fewer
   monospace shouts. One stylesheet so login and dashboard cannot drift. */

/* ⚠️ TOKEN NAMES HERE COLLIDE WITH THE LANDING PAGE — DO NOT RENAME THEM.
 *
 * In this file `--ink` means the page BACKGROUND. In site/app/globals.css `--ink`
 * means the TEXT colour. Same name, opposite meaning. These names are referenced
 * throughout app.html, login.html, dashboard.html and ui.js, so renaming them to
 * match would break every one of those pages. Change the VALUES only, and keep
 * this warning so nobody "tidies" it later.
 *
 * Values below are kept in step with globals.css:
 *   page floor #050604 · raised #0A0E07 · card #101509 · card hover #171E0F
 *   brand #A8EE5C · brand ink #0A1204
 *   hairlines are the brand at low alpha, never a grey line
 */
/* ---------------------------------------------------------------------------
   Self-hosted faces, matching the landing page exactly.
   These pages are plain HTML with no bundler, so next/font is unavailable — the
   variable woff2 files are fetched into web/fonts/ once and served from our own
   origin. No external request, works offline, and no hashed filename to break on
   rebuild (which is why the exported _next/static/media files cannot be used).
   ------------------------------------------------------------------------ */
@font-face{
  font-family:"Inter"; src:url("/fonts/Inter.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo"; src:url("/fonts/Archivo.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono"; src:url("/fonts/JetBrains-Mono.woff2") format("woff2");
  font-weight:100 800; font-style:normal; font-display:swap;
}

:root{
  /* --- surfaces: green-black, never blue-grey ---
     These were #07080A / #0D1013 / #13171B / #1A1F24 — all cool blue-greys, with
     more blue than green in every one. That is what made the product pages read as
     grey while the landing page had been re-keyed to green-black. */
  --ink:#050604;            /* page background (see warning above) */
  --surface:#0A0E07;
  --surface-2:#101509;
  --surface-3:#171E0F;
  --line:rgba(168,238,92,.09);
  --line-2:rgba(168,238,92,.16);
  --fg:#F2F7EC;
  --fg-2:#9EA79A;
  --fg-3:#6B736A;

  /* --- brand: softened from the old acid #C4F53F toward Wise's #9FE870 --- */
  --signal:#A8EE5C;
  --signal-deep:#7FBF33;
  --signal-ink:#0A1204;     /* text on a signal-coloured fill */
  --warn:#FFB454;
  --bad:#FF6B57;
  --ok:#79D9A6;

  /* --- type: the same three self-hosted faces as the landing page ---
     Loaded by the @font-face block below rather than next/font, because these are
     plain HTML pages with no bundler. */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:"Archivo","Inter",-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* --- shape: pills for controls, round for cards. Was a flat 6px. --- */
  --r:9999px;               /* controls */
  --r-tight:0.625rem;       /* inner panels, images, anything wide */
  --r-card:1.25rem;         /* cards */
  --shadow:0 30px 70px -40px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--fg);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}

h1,h2,h3{margin:0;font-family:var(--display);letter-spacing:-.028em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.35rem);font-weight:800}
h2{font-size:1.15rem;font-weight:700}
h3{font-size:1.02rem;font-weight:600}
p{margin:0 0 .8rem;color:var(--fg-2)}

.label{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-3);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  font-family:var(--sans);font-size:.94rem;font-weight:600;
  padding:.8rem 1.3rem;text-decoration:none;white-space:nowrap;
  transition:background .18s,border-color .18s,opacity .18s,filter .18s;
}
/* No lift. The landing page button is flat and this must match it —
   two different button behaviours across one product reads as two products. */
.btn:hover:not(:disabled){filter:brightness(1.06)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

.btn-primary{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
.btn-primary:hover:not(:disabled){background:var(--signal-deep)}
.btn-quiet{background:var(--surface-2);color:var(--fg);border-color:var(--line-2)}
.btn-quiet:hover:not(:disabled){border-color:var(--fg-3)}
.btn-ghost{background:transparent;color:var(--fg-2);border-color:transparent}
.btn-ghost:hover:not(:disabled){color:var(--fg);background:var(--surface-2)}
.btn-block{width:100%}
.btn-sm{padding:.5rem .85rem;font-size:.85rem}

/* Provider buttons keep each brand's own mark and a neutral surface, because a
   green Google button reads as a phishing page. */
.btn-provider{
  background:#fff;color:#0A1204;border-color:#fff;font-weight:600;
}
.btn-provider:hover:not(:disabled){background:#F2F7EC}
.btn-provider.apple{background:#000;color:#fff;border-color:#1D2717}
.btn-provider.apple:hover:not(:disabled){background:#141414}
.btn-provider svg{width:18px;height:18px;flex:none}

/* ---------- surfaces ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
}
.pad{padding:clamp(1.1rem,3vw,1.5rem)}

.pill{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.22rem .55rem;border-radius:var(--r);background:var(--surface-3);color:var(--fg-3);
  border:1px solid var(--line);white-space:nowrap;
}
.pill.hot{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
.pill.warm{background:#33420F;color:var(--signal);border-color:#455718}
.pill.ok{color:var(--ok);border-color:#1F3D2A}
.pill.new{background:#3A2A0B;color:var(--warn);border-color:#4E3A11}

/* ---------- inputs ---------- */
input,select,textarea{
  width:100%;background:var(--ink);color:var(--fg);
  border:1px solid var(--line-2);border-radius:var(--r);
  padding:.75rem .9rem;font-size:.95rem;font-family:inherit;
  transition:border-color .18s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgba(168,238,92,.14);
}
input::placeholder{color:var(--fg-3)}

/* ---------- layout ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1rem,4vw,1.75rem)}
.stack{display:grid;gap:1rem}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

.logo{
  /* .963rem = .95rem + 1.3%, matching the same nudge given to the landing header
     wordmark (1.125rem -> 1.14rem) so login/dashboard stay in step with it. */
  font-weight:800;letter-spacing:.13em;text-transform:uppercase;font-size:.963rem;
  text-decoration:none;color:var(--fg);
}
.logo b{color:var(--signal)}

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(12px);
  animation:rise .55s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:var(--d,0ms)}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
  .btn{transition:none}
}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================================
   COMPONENTS — the markup for these lives in ui.js. Styles stay here so the
   library stays logic-only and one stylesheet governs the whole product.
   ========================================================================= */

/* ---------- fields ---------- */
.field{display:grid;gap:.4rem}
.field label{font-size:.86rem;color:var(--fg-2);font-weight:500}
.field label .opt{color:var(--fg-3);font-weight:400;font-size:.78rem}
.field .hint{font-size:.76rem;color:var(--fg-3)}
.field .err-txt{
  font-size:.78rem;color:var(--bad);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .25s cubic-bezier(.2,.8,.3,1),opacity .2s;
}
.field.bad .err-txt{max-height:3em;opacity:1}
.field.bad input{border-color:var(--bad)}
.field.bad input:focus{box-shadow:0 0 0 3px rgba(255,107,87,.14)}

.pw{position:relative}
.pw input{padding-right:4.2rem}
.pw-toggle{
  position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:var(--fg-3);cursor:pointer;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  padding:.4rem .6rem;border-radius:var(--r);
}
.pw-toggle:hover{color:var(--signal)}
.pw-toggle:focus-visible{outline:2px solid var(--signal);outline-offset:0}

/* ---------- password strength ---------- */
.meter{display:flex;align-items:center;gap:.6rem;margin-top:.1rem}
.meter-bar{flex:1;height:3px;background:var(--surface-3);border-radius:9999px;overflow:hidden}
.meter-bar i{
  display:block;height:100%;width:0;border-radius:9999px;background:var(--bad);
  transition:width .35s cubic-bezier(.2,.8,.3,1),background .35s;
}
.meter[data-score="1"] .meter-bar i{width:25%;background:var(--bad)}
.meter[data-score="2"] .meter-bar i{width:50%;background:var(--warn)}
.meter[data-score="3"] .meter-bar i{width:75%;background:var(--signal-deep)}
.meter[data-score="4"] .meter-bar i{width:100%;background:var(--signal)}
.meter-txt{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-3);min-width:5.5em;text-align:right}

/* ---------- tabs ---------- */
.tabs{
  position:relative;display:inline-flex;gap:.25rem;padding:.25rem;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
}
.tab{
  position:relative;z-index:1;background:transparent;border:0;cursor:pointer;
  font-family:inherit;font-size:.88rem;font-weight:600;color:var(--fg-3);
  padding:.55rem 1.1rem;border-radius:var(--r);transition:color .22s;
}
.tab[aria-selected="true"]{color:var(--signal-ink)}
.tab:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.tab-ind{
  position:absolute;top:.25rem;left:0;height:calc(100% - .5rem);
  background:var(--signal);border-radius:var(--r);
  transition:transform .38s cubic-bezier(.4,0,.2,1),width .38s cubic-bezier(.4,0,.2,1);
}

/* ---------- panels (cross-fade) ---------- */
[data-panel]{
  opacity:0;transform:translateY(8px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.3,1);
}
[data-panel].on{opacity:1;transform:none}
[data-panel][hidden]{display:none}

/* ---------- notice ---------- */
.notice{
  display:none;border-radius:var(--r-tight);padding:.8rem .95rem;font-size:.88rem;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--fg-2);
  animation:rise .3s cubic-bezier(.2,.8,.3,1) both;
}
.notice.on{display:block}
.notice.bad{border-color:var(--bad);color:var(--bad);background:rgba(255,107,87,.06)}
.notice.good{border-color:var(--signal-deep);color:var(--signal);background:rgba(168,238,92,.07)}

/* ---------- spinner in buttons ---------- */
.spin{
  width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .65s linear infinite;flex:none;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .spin{animation:none}
  .tab-ind,[data-panel],.field .err-txt,.meter-bar i{transition:none}
}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:1.6rem;transform:translate(-50%,150%);
  background:var(--signal);color:var(--signal-ink);font-weight:650;font-size:.88rem;
  padding:.72rem 1.25rem;border-radius:999px;box-shadow:var(--shadow);z-index:80;
  transition:transform .38s cubic-bezier(.2,.8,.3,1);
}
.toast.on{transform:translate(-50%,0)}
.toast.bad{background:var(--bad);color:#fff}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:var(--surface);padding:1.05rem 1.1rem}
.stat .v{font-family:var(--mono);font-size:1.7rem;font-weight:600;line-height:1;color:var(--signal)}
.stat .k{font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-3);margin-top:.5rem}
.stat.muted .v{color:var(--fg)}

/* ---------- lead card ---------- */
.lead{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:1.1rem 1.2rem;transition:border-color .2s,opacity .25s}
.lead:hover{border-color:var(--line-2)}
.lead[data-done="1"]{opacity:.45}
.lead-top{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start;flex-wrap:wrap}
.lead .biz{font-weight:650;font-size:1.02rem}
.lead .meta{font-family:var(--mono);font-size:.72rem;color:var(--fg-3);margin-top:.2rem}
.tags{display:flex;gap:.35rem;flex-wrap:wrap}
.problems{margin:.85rem 0 0;padding:0;list-style:none;display:grid;gap:.3rem}
.problems li{font-size:.87rem;color:var(--fg-2);padding-left:1rem;position:relative;line-height:1.45}
.problems li::before{content:"";position:absolute;left:0;top:.55em;width:4px;height:4px;
  border-radius:50%;background:var(--line-2)}
.problems li:first-child{color:var(--fg);font-weight:600}
.problems li:first-child::before{background:var(--bad)}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem;align-items:center}
.contact{font-family:var(--mono);font-size:.78rem;color:var(--fg-2);background:var(--surface-2);
  border:1px solid var(--line);padding:.45rem .7rem;border-radius:var(--r-tight)}
.msg{margin-top:.8rem;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-tight);
  padding:.9rem;font-family:var(--mono);font-size:.8rem;white-space:pre-wrap;line-height:1.6;display:none}
.msg.on{display:block}

/* ---------- audit findings ----------
   The fix is the product, so it gets real space when opened. Collapsed by
   default because a card with six expanded fixes is unreadable — the problem
   list is the scan layer, the fix is the detail layer. */
.findings{margin-top:.9rem;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.finding{background:var(--surface-2)}

.f-head{
  width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;
  background:transparent;border:0;cursor:pointer;text-align:left;
  padding:.7rem .9rem;font-family:inherit;font-size:.88rem;color:var(--fg);
  transition:background .18s;
}
.f-head:hover{background:var(--surface-3)}
.f-head:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.f-sev{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.16rem .4rem;border-radius:9999px;white-space:nowrap;border:1px solid;
}
.finding.critical .f-sev{color:var(--bad);border-color:#4A2019;background:#2A100C}
.finding.warning .f-sev{color:var(--warn);border-color:#4A3512;background:#2A1E08}
.finding.opportunity .f-sev{color:var(--fg-2);border-color:var(--line-2);background:var(--surface-3)}
.finding.timing .f-sev{color:var(--signal);border-color:#3A4A12;background:#1E2708}
.f-title{font-weight:550;line-height:1.35}
.finding.critical .f-title{font-weight:650}
.f-chev{font-family:var(--mono);color:var(--fg-3);font-size:1rem;line-height:1}

.f-body{padding:0 .9rem .9rem 3.9rem;animation:rise .3s cubic-bezier(.2,.8,.3,1) both}
@media(max-width:560px){.f-body{padding-left:.9rem}}
.f-what{margin:0 0 .7rem;font-size:.86rem;color:var(--fg-2);line-height:1.5}
.f-fix{
  background:var(--ink);border-left:2px solid var(--signal);border-radius:0 var(--r-tight) var(--r-tight) 0;
  padding:.7rem .9rem;font-size:.87rem;color:var(--fg);line-height:1.5;
}
.f-fix b{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--signal);margin-bottom:.3rem;font-weight:600}
.f-meta{display:grid;gap:.45rem;margin-top:.7rem}
.f-meta span{font-size:.8rem;color:var(--fg-3);line-height:1.45}
.f-meta b{font-family:var(--mono);font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-2);margin-right:.4rem}

/* ---------- health score ---------- */
.health{display:flex;align-items:center;gap:.55rem;margin-top:.8rem}
.h-num{font-family:var(--mono);font-size:1.05rem;font-weight:600;line-height:1}
.health.bad .h-num{color:var(--bad)}
.health.mid .h-num{color:var(--warn)}
.health.ok .h-num{color:var(--ok)}
.h-of{font-family:var(--mono);font-size:.7rem;color:var(--fg-3)}
.h-bar{flex:1;max-width:130px;height:3px;background:var(--surface-3);border-radius:9999px;overflow:hidden}
.h-bar i{display:block;height:100%;border-radius:9999px;transition:width .6s cubic-bezier(.2,.8,.3,1)}
.health.bad .h-bar i{background:var(--bad)}
.health.mid .h-bar i{background:var(--warn)}
.health.ok .h-bar i{background:var(--ok)}
.h-lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3)}

/* ============================================================================
   PAGE-TO-PAGE TRANSITIONS
   ---------------------------------------------------------------------------
   Taimoor, more than once: *"the experience for navigating from one page to
   another is not good… when I click on Find businesses it should move very
   smoothly, same as the login page tab."*

   He was right and I kept mishearing it as a styling request. The login toggle
   feels good because Sign in / Create account never leaves the document — it
   animates in place. Every real navigation (login → dashboard → tool) was a hard
   document swap: white flash, content jump, scroll reset.

   `@view-transition { navigation: auto; }` opts these separate HTML documents into
   cross-document view transitions, so the browser cross-fades between them
   automatically. Two lines of CSS, no router, no SPA rewrite, no JavaScript — the
   pages stay plain HTML files.

   The named elements below persist ACROSS the navigation rather than fading with
   the rest: the header bar and the wordmark stay put while the body content
   changes underneath. That is what makes it read as one app instead of separate
   pages — the same trick the login toggle uses, applied to whole documents.

   Chrome/Edge support this today; Safari and Firefox simply navigate as before, so
   there is no fallback to write.
   ========================================================================= */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vt-out .18s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root) {
  animation: vt-in .26s cubic-bezier(0,0,.2,1) both;
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }

/* Anything with a name is treated as the SAME element on both pages, so it slides
   to its new position instead of fading out and back in. Names must be unique per
   page or the transition is skipped entirely. */
header.bar, .topbar { view-transition-name: appbar; }
.logo { view-transition-name: wordmark; }

@media (prefers-reduced-motion: reduce) {
  /* Keep the navigation, drop the movement. */
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}