/* ============================================================================
   _app.css - Jtek internal app design system (C1 Ivory)
   ONE source of truth for the support hub and every page behind it
   (support, list, brandon, help center, guides). Link this on those pages and
   reference the tokens below via var(). Change a value here and it updates
   everywhere. Do NOT use this on the public marketing site (separate system).
   ============================================================================ */

:root {
  /* Surfaces */
  --bg:          #F3F4F6;   /* page background (cool grey) */
  --surface:     #FFFFFF;   /* cards */
  --surface-2:   #F1F3EE;   /* nested chips / muted fills */
  --forest:      #10160F;   /* dark hero */
  --hairline:    rgba(20,30,20,0.07);

  /* Text */
  --text:        #141613;   /* primary */
  --text-2:      #6E746A;   /* secondary */
  --muted:       #727870;   /* labels / captions (WCAG AA: 4.5:1 on white, up from a failing 2.7:1) */

  /* Brand */
  --green:       #16A34A;   /* primary green */
  --green-dark:  #107A36;   /* CTA / darker green */
  --green-hover: #15803D;   /* hover */
  --green-bright:#22C55E;   /* bright accents / dark-tile buttons */
  --blue:        #0057FF;   /* Jtek blue */
  --yellow:      #FACC15;   /* Brandon accent */

  /* Shape */
  --radius-card:   26px;
  --radius-nested: 18px;
  --radius-pill:   100px;

  /* Elevation */
  --shadow-card: 0 2px 4px rgba(20,30,20,0.04), 0 16px 40px rgba(20,30,20,0.07);
  --shadow-hero: 0 2px 4px rgba(10,16,10,0.2), 0 24px 60px rgba(10,16,10,0.25);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;

  /* Type scale (px, pairs with --font). Semantic sizes so headings and body
     match page to page. Migrate inline font-sizes onto these. */
  --fs-caption: 12px;
  --fs-small:   13.5px;
  --fs-body:    15.5px;
  --fs-lead:    17px;
  --fs-h4:      20px;
  --fs-h3:      24px;
  --fs-h2:      30px;
  --fs-h1:      38px;
  --fs-display: 48px;
  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-body:    1.6;
  --tracking-tight: -0.02em;

  /* Spacing scale (8px base). Use for padding/margin/gap so rhythm is uniform. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* Motion durations (pair with --ease). Rule: only animate transform/opacity. */
  --dur-fast:   120ms;  /* hover, tap feedback */
  --dur-base:   180ms;  /* buttons, small state changes */
  --dur-slow:   300ms;  /* panels, toggles, expanders */
  --dur-reveal: 450ms;  /* entrances, scroll reveals */

  /* Liquid-glass "Back" pill (floating top-left, replaces the header bar) */
  --glass-bg:           rgba(255,255,255,0.5);
  --glass-bg-hover:     rgba(255,255,255,0.68);
  --glass-border:       rgba(255,255,255,0.65);
  --glass-blur:         blur(22px) saturate(180%);
  --glass-shadow:       inset 0 1px 1px rgba(255,255,255,0.8), inset 0 -1px 1px rgba(20,30,20,0.04), 0 8px 24px rgba(20,30,20,0.14), 0 2px 6px rgba(20,30,20,0.08);
  --glass-shadow-hover: inset 0 1px 1px rgba(255,255,255,0.9), 0 14px 34px rgba(20,30,20,0.2), 0 3px 8px rgba(20,30,20,0.1);
}

/* ---- Shared components (opt-in classes) --------------------------------- */

.app-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease);
}
.app-card--hover:hover { transform: translateY(-6px); }

.app-hero {
  position: relative; overflow: hidden;
  background: var(--forest); color: #fff;
  border-radius: 22px;
  box-shadow: var(--shadow-hero);
}
.app-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 78% 30%, rgba(34,197,94,0.18) 0%, transparent 60%);
}

.app-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; border-radius: var(--radius-pill);
  font-family: inherit; font-weight: 600; cursor: pointer;
  background: var(--green-dark); color: #fff; padding: 11px 20px;
  transition: background .15s, transform .15s;
}
.app-btn:hover { background: var(--green-hover); transform: scale(1.03); }
.app-btn:active { transform: scale(0.98); }
.app-btn--ghost { background: transparent; border: 1.5px solid var(--hairline); color: var(--text); }
.app-btn--ghost:hover { background: var(--surface-2); }

.app-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}

.app-navglass {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--hairline); border-radius: 18px;
  box-shadow: 0 2px 24px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
}

/* Progress language: one bar + one ring track/fill used everywhere */
.app-bar { height: 5px; background: #EDEFEA; border-radius: var(--radius-pill); overflow: hidden; }
.app-bar > i { display: block; height: 100%; background: var(--green); border-radius: var(--radius-pill); transition: width .4s ease; }

/* ---- Type utilities (opt-in): one scale everywhere --------------------- */
.app-h1      { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--text); }
.app-h2      { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--text); }
.app-h3      { font-size: var(--fs-h3); line-height: var(--lh-snug);  font-weight: 600; color: var(--text); }
.app-h4      { font-size: var(--fs-h4); line-height: var(--lh-snug);  font-weight: 600; color: var(--text); }
.app-lead    { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-2); }
.app-body    { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.app-small   { font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--text-2); }
.app-caption { font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--muted); }

/* ---- Iconography: one set, one weight -----------------------------------
   Standard: inline SVG, 24x24 viewBox, no fill, stroke=currentColor, round
   caps/joins (Lucide/Feather family). .app-icon normalizes size + stroke so
   icons from different sources line up. Swap page icons onto this class. */
.app-icon     { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.app-icon--sm { width: 16px; height: 16px; }
.app-icon--lg { width: 24px; height: 24px; }

/* ---- Loading / empty / error kit: same three states on every page ------ */
.app-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--surface-2); border-top-color: var(--green); animation: app-spin .7s linear infinite; }
@keyframes app-spin { to { transform: rotate(360deg); } }

.app-skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-nested); }
.app-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); animation: app-shimmer 1.4s infinite; }
@keyframes app-shimmer { 100% { transform: translateX(100%); } }

.app-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-7) var(--sp-5); max-width: 440px; margin: 0 auto; }
.app-state__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-nested); background: var(--surface-2); color: var(--text-2); }
.app-state__title { font-size: var(--fs-lead); font-weight: 600; color: var(--text); }
.app-state__msg  { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.app-state--error .app-state__icon { background: rgba(220,38,38,0.10); color: #DC2626; }

/* ---- Page header (chrome): back on the left, sticky frosted -------------
   Standard top bar for hub, tool, and article pages. Back sits on the left;
   no logo, since the Jtek sub-account sidebar already shows it. Sticky and
   frosted so it stays reachable on long pages. Set the back href per page
   (tools to /support, help articles to their parent section). */
/* Neutralize every internal-page header bar (the KB/guide/tutorial ".nav-outer"
   and list.html's ".app-header") and float the Back control as a glass pill
   instead. `body`-prefixed so these outrank the per-family bar rules in
   _kb.css / _shared.css / the injected page blocks without editing them. */
body:not(.no-glass-back) .nav-outer, body:not(.no-glass-back) .app-header {
  position: static !important; margin: 0 !important; padding: 0 !important;
  background: none !important; border: none !important; box-shadow: none !important;
  border-radius: 0 !important; min-height: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
body:not(.no-glass-back) .nav-outer > nav, body:not(.no-glass-back) .nav-outer nav.topnav {
  max-width: none !important; margin: 0 !important; padding: 0 !important;
  background: none !important; border: none !important; box-shadow: none !important;
  border-radius: 0 !important; min-height: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
body:not(.no-glass-back) .nav-logo { display: none !important; }
body:not(.no-glass-back) .nav-outer .nav-right a[href="/list"] { display: none !important; }  /* drop guides' Onboarding link */

.app-header__back,
body:not(.no-glass-back) .nav-outer .btn-ghost, body:not(.no-glass-back) .topnav .btn-ghost {
  position: fixed !important; top: 20px; left: 20px; z-index: 1200;
  display: inline-flex !important; align-items: center; gap: 7px;
  padding: 10px 18px 10px 15px !important;
  font-family: inherit; font-size: 14px !important; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text) !important; text-decoration: none; border-radius: var(--radius-pill) !important;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease) !important;
}
.app-header__back:hover,
body:not(.no-glass-back) .nav-outer .btn-ghost:hover, body:not(.no-glass-back) .topnav .btn-ghost:hover {
  transform: translateY(-1px) !important;
  background: var(--glass-bg-hover) !important;
  box-shadow: var(--glass-shadow-hover) !important;
}
.app-header__back:active,
body:not(.no-glass-back) .nav-outer .btn-ghost:active, body:not(.no-glass-back) .topnav .btn-ghost:active { transform: translateY(0) scale(0.97) !important; }

/* ---- Accessibility base (applies to any page that links this file) ------ */

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Dark mode -----------------------------------------------------------
   Redefine the tokens and everything referencing var() flips at once. The
   forest hero stays dark in both themes (white text on it is correct in
   both), so we only give it a hairline in dark to separate it from the
   near-black page. Greens stay; blue brightens a touch for legibility. */

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0B0E09;   /* page (warm near-black) */
    --surface:     #171C15;   /* cards, clearly above bg */
    --surface-2:   #212820;   /* nested chips / muted fills */
    --forest:      #10160F;   /* hero stays dark in both themes */
    --hairline:    rgba(255,255,255,0.10);

    --text:        #ECEFE9;
    --text-2:      #A6ADA0;
    --muted:       #767C70;

    /* --blue stays #0057FF: the solid blue "Talk to a Human" card must keep its
       bold brand fill, and #0057FF reads fine on near-black. */

    --shadow-card: 0 2px 4px rgba(0,0,0,0.30), 0 16px 40px rgba(0,0,0,0.45);
    --shadow-hero: 0 2px 4px rgba(0,0,0,0.40), 0 24px 60px rgba(0,0,0,0.55);

    /* Glass pill retinted for the near-black page (dark glass) */
    --glass-bg:           rgba(28,34,26,0.45);
    --glass-bg-hover:     rgba(40,48,38,0.58);
    --glass-border:       rgba(255,255,255,0.14);
    --glass-shadow:       inset 0 1px 1px rgba(255,255,255,0.1), 0 8px 24px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
    --glass-shadow-hover: inset 0 1px 1px rgba(255,255,255,0.14), 0 14px 34px rgba(0,0,0,0.6), 0 3px 8px rgba(0,0,0,0.5);
  }

  .app-hero { border: 1px solid var(--hairline); }

  .app-navglass {
    background: rgba(18,22,16,0.72);
    border: 1px solid var(--hairline);
    box-shadow: 0 2px 24px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  }

  .app-bar { background: var(--surface-2); }

  /* Skeleton shimmer: soften the sweep so it doesn't glare on near-black. */
  .app-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); }

  /* (The glass Back pill flips via the --glass-* tokens above.) */

  /* Product mockups stay a light "screenshot" in dark mode. Re-declaring the
     tokens on the mockup container reverts any tokenized fill/text inside to
     its light value, so partially-tokenized mockups can't end up light-on-light
     (invisible) or half-flipped. --forest is left dark (real app sidebars are
     dark in both themes). */
  .step-mockup {
    --bg:#F7F6F3; --surface:#FFFFFF; --surface-2:#F1F3EE;
    --text:#141613; --text-2:#6E746A; --muted:#9BA096;
    --hairline:rgba(20,30,20,0.07);
    /* also set color so descendants that INHERIT (rather than use var()) get the
       light-theme text value, not the dark one computed on <body>. Elements with
       their own color (e.g. the dark sidebar's light labels) are unaffected. */
    color:#141613;
  }
}