/* Bifyo design system - ported verbatim from template/Business Gap Map.dc.html
   (:root tokens + global rules). Do not hand-roll colors elsewhere; use these
   custom properties so every page stays visually consistent. */
:root{
  /* Light is the default theme. --solid/--on-solid stay fixed across BOTH
     themes: they're the "always-dark-navy button / logo tile" pair used
     throughout the app (background:var(--solid);color:var(--on-solid)),
     independent of --ink which is retinted per theme. */
  --solid:#1c1e2a; --on-solid:#fcfcfe;

  --color-bg:#f5f6fa; --color-surface:#fcfcfe; --color-text:#1c1e2a;
  --color-accent:#5d5294; --color-accent-soft:#eeecf7;
  /* Brighter two-stop version of --color-accent for hero-level marketing
     accents (gradient buttons/badges/headline text) - same violet-indigo
     family, just more saturated than the muted flat --color-accent used
     for everyday UI (links, icons, small badges) so it doesn't read as
     garish at small sizes elsewhere. */
  --gradient-accent:linear-gradient(135deg,#6d5bd0,#4338ca);
  --gradient-accent-soft:linear-gradient(135deg,#efeaff,#e6e4fb);
  --color-divider:color-mix(in srgb,#1c1e2a 12%,transparent);
  --shadow-sm:0 1px 2px rgba(28,30,42,.05),0 0 0 1px rgba(28,30,42,.07);
  --shadow-md:0 2px 5px rgba(28,30,42,.05),0 10px 26px rgba(28,30,42,.07),0 0 0 1px rgba(28,30,42,.06);
  --shadow-lg:0 24px 60px rgba(28,30,42,.13),0 0 0 1px rgba(28,30,42,.07);
  --ink:#1c1e2a; --ink-2:#4a4e5e; --ink-3:#767a8c; --ink-4:#9ba0b0;
  --line:#e4e6ee; --line-2:#eef0f6; --panel:#fcfcfe;
  --good:#2f7d5f; --good-soft:#e8f1ec; --warn:#a8741c; --warn-soft:#f7f0e2;
  --bad:#b04a42; --bad-soft:#f6eae9;
  --info:#1e3f75; --info-soft:#cfdff5;
  --scrollbar:#d6d9e4; --scrollbar-hover:#c0c4d3;
  --header-bg:rgba(245,246,250,.9); --mockup-bg:rgba(252,252,254,.94); --mockup-bg-2:rgba(252,252,254,.96);

  /* Lightness used by the red->green score gradient (score_gradient_color()
     in includes/functions.php, bifyoScoreColor() in bifyo-map-markers.js) -
     darker in light mode for contrast against a near-white panel, lighter
     in dark mode against a near-black one. Hue/saturation stay fixed; only
     this changes per theme. */
  --score-l:42%; --score-bg-l:46%; --score-bg-a:0.14;
}
html[data-theme="dark"]{
  --score-l:60%; --score-bg-l:58%; --score-bg-a:0.20;
  --color-bg:#111219; --color-surface:#1a1b24; --color-text:#e7e8f0;
  --color-accent:#9089d6; --color-accent-soft:#26243b;
  --gradient-accent:linear-gradient(135deg,#8b7ae8,#6355d6);
  --gradient-accent-soft:linear-gradient(135deg,#2b2748,#241f3d);
  --color-divider:color-mix(in srgb,#e7e8f0 12%,transparent);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.05);
  --shadow-md:0 2px 5px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.05);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);
  --ink:#f3f4fa; --ink-2:#cbcdda; --ink-3:#a7aabe; --ink-4:#8a8da3;
  --line:#2b2d3b; --line-2:#24262f; --panel:#1a1b24;
  --good:#57c99a; --good-soft:#183226; --warn:#e0ac53; --warn-soft:#332813;
  --bad:#e8837a; --bad-soft:#3a1f1e;
  --info:#bcd6f7; --info-soft:#28425f;
  --scrollbar:#383a49; --scrollbar-hover:#484b5e;
  --header-bg:rgba(17,18,25,.86); --mockup-bg:rgba(26,27,36,.9); --mockup-bg-2:rgba(26,27,36,.94);
}
html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
/* overflow-x:hidden is a safety net for decorative bleed elements (hero
   gradient blobs, floating tag pills with negative offsets) that
   intentionally extend past their container on wide viewports - never a
   substitute for fixing an actual too-wide layout. */
body{background:var(--color-bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:15px;font-family:Inter,system-ui,sans-serif;margin:0;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{color:var(--ink)}
a{color:var(--color-accent);text-decoration:none}
a:hover{color:#473e73}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
button{white-space:nowrap;font-family:Inter,sans-serif}
input,select,textarea{font-family:Inter,sans-serif}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:8px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-hover);background-clip:content-box;border:3px solid transparent}
::-webkit-scrollbar-track{background:transparent}
@keyframes bgmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.screen{animation:bgmIn .22s ease both}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center}
@keyframes bgmSpin{to{transform:rotate(360deg)}}
@keyframes bgmUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.toast{animation:bgmUp .2s ease both}

/* --- interaction states --- */
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:6px}
button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.45;cursor:not-allowed}
button:not(:disabled):active{transform:translateY(.5px)}
.ldg{position:relative;color:transparent!important}
.ldg>*{visibility:hidden}
.ldg::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #fcfcfe;border-top-color:transparent;animation:bgmSpin .7s linear infinite}
.skip{position:absolute;left:-9999px;top:8px;z-index:6000;background:var(--ink);color:#fcfcfe;padding:9px 15px;border-radius:8px;font:500 14px Inter,sans-serif;text-decoration:none}
.skip:focus{left:8px}
.inp-err{border-color:var(--bad)!important;box-shadow:0 0 0 3px var(--bad-soft)!important}
.err-msg{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--bad);margin-top:5px}
.hint{font-size:12.5px;color:var(--ink-4);margin-top:5px}

/* --- manual sidebar collapse (independent of viewport width) --- */
.appside.collapsed{width:62px!important}
.appside.collapsed .sblabel{display:none}
html.sidebar-collapsed-pref #app-sidebar{width:62px!important}
html.sidebar-collapsed-pref #app-sidebar .sblabel{display:none}

/* --- responsive tiers: 1280 / 1024 / 768 / 640 ---
   !important on the collapse rules below is deliberate: callers routinely
   pair class="g2"/"g3"/"g4"/"split" with an inline style that customizes
   gap or the column ratio (e.g. "minmax(0,.95fr) minmax(0,1.05fr)") for
   that one section, and a plain inline style always beats an external
   class rule regardless of media query - so without !important here, that
   per-section inline override silently wins at every viewport width and
   the section never stacks on mobile. This has already caused real bugs
   (index.php's split sections, opportunities_hub.php's paired cards). */
@media(max-width:1280px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:1024px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))!important}.split{grid-template-columns:1fr!important;gap:20px!important}.appside{width:62px!important}.appside .sblabel{display:none}}
@media(max-width:768px){.g4,.g3,.g2{grid-template-columns:1fr!important}}
@media(max-width:640px){
  .appside{display:none!important}
  .mobnav{display:flex!important}
  .appmain{padding-bottom:72px}
  .apptop{padding:8px 12px!important;gap:8px!important}
  .hidesm{display:none!important}
  .screen{padding-left:16px!important;padding-right:16px!important}
  h1{font-size:24px!important}
}
.mobnav{display:none}

/* --- Google Places Autocomplete dropdown: hide the "powered by Google"
   attribution strip Google renders at the bottom of .pac-container. Applies
   wherever the address autocomplete widget is used across the app. */
.pac-container:after{display:none!important}

/* --- flash / toast --- */
.flash{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:5000;padding:10px 16px;border-radius:9px;font:500 14px Inter,sans-serif;box-shadow:var(--shadow-lg)}
.flash-success{background:var(--good-soft);color:var(--good)}
.flash-error{background:var(--bad-soft);color:var(--bad)}

/* --- info tip: small "?" badge next to a section title, opens an
   explanatory popup on hover (desktop, via :hover) or tap (mobile/touch,
   via bifyo-info-tip.js toggling .is-open) - see render_info_tip() in
   includes/functions.php, used across report/opportunity section headings. */
.bifyo-info-tip{position:relative;display:inline-flex;vertical-align:middle;margin-left:5px}
.bifyo-info-tip-btn{width:15px;height:15px;border-radius:50%;border:1px solid var(--line);background:var(--color-bg);color:var(--ink-3);font:600 9px/1 Inter,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto}
.bifyo-info-tip-popup{display:none;position:absolute;bottom:22px;left:50%;transform:translateX(-50%);width:230px;max-width:min(230px,72vw);background:var(--ink);color:#fcfcfe;font:400 11.5px/1.5 Inter,sans-serif;padding:9px 11px;border-radius:8px;box-shadow:var(--shadow-md);z-index:400;text-align:left;pointer-events:none}
.bifyo-info-tip:hover .bifyo-info-tip-popup,.bifyo-info-tip-popup.is-open{display:block}

/* Marketing FAQ accordions: rotate the caret when open, hide the default marker. */
details[open] > summary .faq-caret{transform:rotate(180deg)}
summary:has(.faq-caret)::-webkit-details-marker{display:none}
/* Marketing header: nav labels and CTAs never wrap onto two lines. */
header nav a, header a[href="/login"], header a[href="/signup"], header a[href="/dashboard"]{white-space:nowrap}
@media(max-width:1180px){header nav a{padding:7px 7px!important}}
/* Marketing header: below 1280px the full nav no longer fits (8 links +
   sign-in + CTA) - switch to the hamburger menu, which has every link. */
@media(max-width:1279px){
  header:has(#btn-mobile-menu) .hidesm{display:none!important}
  header #btn-mobile-menu{display:flex!important}
}
/* Brand logo (brand_logo() in includes/functions.php): light/dark files. */
.brand-dark{display:none!important}
html[data-theme="dark"] .brand-light{display:none!important}
html[data-theme="dark"] .brand-dark{display:block!important}
/* Collapsed / narrow sidebar: logo mark and collapse toggle stack vertically
   (a 36px mark + 24px toggle don't fit side by side in 62px). */
.appside.collapsed .sbhead, html.sidebar-collapsed-pref #app-sidebar .sbhead{flex-direction:column;padding:14px 0 10px!important;gap:8px!important}
@media(max-width:1024px){.appside .sbhead{flex-direction:column;padding:14px 0 10px!important;gap:8px!important}}
/* Narrow phones: the marketing header (logo + theme + menu buttons) must fit
   without pushing the page sideways. */
@media(max-width:480px){
  header:has(#btn-mobile-menu) > div:first-child{padding-left:16px!important;padding-right:16px!important;gap:10px!important}
}