/* ============================================================
   Cred Count website — design tokens, reset and shared chrome
   Shared by index.html and the generated legal pages.
   Extracted from index.html's inline <style> 2026-07-31.

   Everything that must look identical on every page lives here:
   the palette, the type scale, the header, the footer and the
   focus ring. site.css and legal.css add what is genuinely local
   to a landing page or to a long legal document — they do not
   redefine anything below.
   ============================================================ */

/* fonts.css is linked by each page ahead of this file rather than @import-ed:
   an @import here would make the browser fetch tokens.css before it could even
   discover the font files, and the type would flash twice on a cold load. */

:root{
  --slate-900:#0F172A; --slate-850:#172033; --slate-800:#1E293B; --slate-700:#334155;
  --cyan:#38BDF8; --indigo:#6366F1; --green:#4ADE80; --amber:#FBBF24;
  --ops:#F97316; --gold:#FFD700; --purple:#8D58FF; --pink:#FFB1E5; --teal:#13D4D4;
  --white:#FFFFFF; --dim:#94A3B8; --low:#7C8BA5;
  --grad:linear-gradient(100deg,#38BDF8,#6366F1);
  --grad-cred:linear-gradient(100deg,#34D399,#059669);
  --grad-ops:linear-gradient(100deg,#FB923C,#EA580C);
  --grad-gold:linear-gradient(100deg,#FDE047,#CA8A04);

  /* Roboto and JetBrains Mono are self-hosted (see fonts.css) so the site
     renders identically on every OS and matches the app's own typeface.
     The system stack stays behind them as the swap fallback. */
  --mono:"JetBrains Mono",ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace;
  --sans:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --maxw:1160px;
  --gutter:24px;
  --bar-h:66px;              /* header height — also the scroll-margin offset */
  --hairline:rgba(51,65,85,.5);
  --bar-bg:rgba(15,23,42,.72);
}
*{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* The canvas, not just the page. Without a background on <html> the browser
   paints its own white behind the document until <body> renders, which showed
   as a flash between page transitions. The shell's <meta name="color-scheme">
   can't prevent it — a meta only applies once the head is parsed, and the gap
   is earlier than that. Declaring color-scheme here as a *style* is what makes
   the UA canvas dark from the first paint. Keep both lines. */
html{background:var(--slate-900); color-scheme:dark}
body{
  background:var(--slate-900); color:var(--white); font-family:var(--sans);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
/* 🔴 Do NOT put `overflow-x:hidden` back on body.
   It was here until 2026-08-06, hiding a real 52px overflow from the
   restacked tables (see legal.css, the td rule) — and it caused a second,
   much stranger bug while doing it.
   Per CSS overflow §3, when one axis is `hidden` and the other is `visible`,
   the used value of the visible one becomes `auto`. So this single
   declaration silently made <body> a SCROLL CONTAINER. `position:sticky`
   resolves against its nearest scrollport, so the site header stopped
   sticking to the viewport and started sticking to body — which on mobile
   Chrome, where the window scrolls too, showed up as a navbar that shifted
   and was clipped at the top of the page.
   If horizontal scrolling ever returns, find what is too wide and fix that.
   Hiding it here breaks the header again and hides the next one too. */
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* Headings set their own measure rather than breaking wherever the box ends;
   `balance` evens the last line, `pretty` keeps single-word widows out of
   body copy. Both are ignored by browsers that don't have them. */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}

/* Anything the header would otherwise cover when jumped to. */
[id]{scroll-margin-top:calc(var(--bar-h) + 12px)}

/* One focus ring for the whole site. Both stylesheets strip link underlines,
   so the UA default was doing more work than it should on a dark background. */
a:focus-visible,button:focus-visible,summary:focus-visible,
[tabindex]:focus-visible,.tw:focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}

/* Skip link — visible only on focus. */
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--cyan);
  color:var(--slate-900);padding:12px 18px;font-weight:600;border:0}
.skip:focus{left:8px;top:8px}

/* ============================================================
   SITE HEADER — one definition, both pages
   The landing page and the legal pages had separate bars that drifted:
   different translucency (.72 vs .88), different border, different
   container width, different stacking order. They are the same component
   and now have one implementation; only the links inside them differ.
   ============================================================ */
.sitebar{
  position:sticky; top:0; z-index:50; width:100%;
  background:var(--bar-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
/* No backdrop-filter means no blur to hide behind, so the bar has to carry
   its own opacity or the text under it shows through. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sitebar{background:rgba(15,23,42,.96)}
}
.sitebar-in{display:flex; align-items:center; gap:16px; height:var(--bar-h)}
.brand{display:flex; align-items:center; gap:11px; font-weight:800;
  letter-spacing:-.01em; color:var(--white); border:0; flex:none}
.brand img{width:30px;height:30px;border-radius:8px}

.sitenav{display:flex; gap:30px; font-size:.92rem; color:var(--dim);
  margin-left:auto; align-items:center}
.sitenav a{color:var(--dim); border:0; transition:color .15s ease}
.sitenav a:hover,.sitenav a:focus-visible{color:var(--white)}
/* Where you are, marked the same way everywhere: the current page on the legal
   pages, the section you're reading on the landing page. */
.sitenav a[aria-current]{color:var(--white); position:relative}
.sitenav a[aria-current]::after{content:""; position:absolute;
  left:0; right:0; bottom:-7px; height:2px; border-radius:2px;
  background:var(--grad)}
@media (max-width:900px){
  .sitenav a[aria-current]::after{left:2px; right:auto; bottom:8px; width:16px}
}

/* Trailing slot: the landing page's "No account needed" badge. Pushed to the
   far right, with the links sitting to its left. */
.sitebar-end{display:flex; align-items:center; gap:22px; flex:none}
.sitenav + .sitebar-end{margin-left:22px}

.navtoggle{display:none; margin-left:auto; flex:none;
  width:42px; height:42px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--hairline); border-radius:11px;
  color:var(--white); cursor:pointer; padding:0}
.navtoggle .bars{display:block; width:18px; height:2px; border-radius:2px;
  background:currentColor; position:relative}
.navtoggle .bars::before,.navtoggle .bars::after{content:""; position:absolute;
  left:0; width:18px; height:2px; border-radius:2px; background:currentColor;
  transition:transform .2s ease, top .2s ease}
.navtoggle .bars::before{top:-6px} .navtoggle .bars::after{top:6px}
.navtoggle[aria-expanded="true"] .bars{background:transparent}
.navtoggle[aria-expanded="true"] .bars::before{top:0; transform:rotate(45deg)}
.navtoggle[aria-expanded="true"] .bars::after{top:0; transform:rotate(-45deg)}

/* --- header, small screens -------------------------------------------------
   The landing page shipped a hamburger that no rule ever displayed, so on a
   phone the header had no navigation at all — no sections, no Privacy, no
   Terms. The panel below is the same list, disclosed. */
@media (max-width:900px){
  .navtoggle{display:flex}
  .sitebar-end{display:none}
  .sitenav{
    display:none;
    position:absolute; top:var(--bar-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    margin:0; padding:6px var(--gutter) 14px;
    background:var(--slate-850); border-bottom:1px solid var(--hairline);
    box-shadow:0 28px 44px -26px rgba(0,0,0,.95);
    max-height:calc(100vh - var(--bar-h)); overflow-y:auto;
  }
  .sitebar.open .sitenav{display:flex}
  .sitenav a{padding:14px 2px; font-size:1rem; color:#CBD5E1;
    border-bottom:1px solid rgba(51,65,85,.28)}
  .sitenav a:last-child{border-bottom:0}
}
/* Without JS there is no button to press, so the links stay in the bar and
   simply wrap — a cramped header beats a header with no navigation in it. */
html:not(.js) .navtoggle{display:none}
@media (max-width:900px){
  html:not(.js) .sitenav{display:flex; position:static; flex-direction:row;
    flex-wrap:wrap; gap:6px 18px; padding:0; background:none; border:0;
    box-shadow:none; font-size:.82rem}
  html:not(.js) .sitenav a{padding:0; border:0}
  html:not(.js) .sitebar-in{height:auto; flex-wrap:wrap; padding-top:10px;
    padding-bottom:10px}
}

/* ============================================================
   SITE FOOTER — one definition, both pages
   ============================================================ */
.sitefoot{border-top:1px solid var(--hairline); margin-top:72px;
  background:linear-gradient(180deg,transparent,rgba(23,32,51,.5))}
/* padding-block only — .wrap owns the horizontal gutter, and a `padding`
   shorthand here silently zeroed it and ran the footer to the screen edge. */
.sitefoot-in{display:grid; gap:26px 40px;
  padding-top:40px; padding-bottom:46px;
  grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
.sitefoot h2{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--low); font-weight:600;
  margin:0 0 12px; border:0; padding:0}
.sitefoot ul{list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:9px}
/* legal.css gives document lists a bottom margin; the footer is not a document
   list, and the two spacings compounded into a visibly looser column there. */
.sitefoot li{margin:0}
.sitefoot a{color:var(--dim); border:0; font-size:.88rem;
  transition:color .15s ease}
.sitefoot a:hover{color:var(--white)}
.foot-brand{display:flex; align-items:flex-start; gap:12px}
.foot-brand img{width:30px;height:30px;border-radius:8px;flex:none}
.foot-blurb{color:var(--dim); font-size:.86rem; line-height:1.6}
.foot-blurb strong{color:var(--dim); font-weight:650}
.foot-addr{display:block; color:var(--low); font-size:.8rem;
  font-style:normal; margin-top:6px; line-height:1.55}
.foot-legal{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px 18px;
  justify-content:space-between; align-items:center;
  padding-top:22px; border-top:1px solid rgba(51,65,85,.28);
  color:var(--low); font-size:.8rem}
.foot-stage{font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase;
  font-size:.7rem; color:var(--low);
  border:1px solid var(--hairline); border-radius:99px; padding:4px 11px}

@media (max-width:760px){
  .sitefoot-in{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}

/* ============================================================
   CROSS-PAGE TRANSITIONS
   A cross-document view transition only runs when BOTH the page you leave and
   the page you arrive at declare it, so this has to live in the stylesheet all
   three pages share. It used to sit in legal.css, which meant privacy<->terms
   faded and anything involving the home page cut hard.

   @view-transition MUST be at the top level of the stylesheet. It is ignored
   inside @media, which is where this rule used to sit — so the fade never ran
   anywhere, including between the two legal pages. Reduced motion is handled
   by cancelling the animations below instead: those users get the instant
   swap they had before, which is the point.

   Browsers without the View Transitions API ignore all of this and navigate
   exactly as they do today.
   ============================================================ */
@view-transition{navigation:auto}

::view-transition-old(root){animation:vt-out .18s ease both}
::view-transition-new(root){animation:vt-in .22s ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* The header and footer are the same component on every page, so hold them
   still and cross-fade only the content beneath. Without this the whole
   viewport dips, including chrome that never changed. */
.sitebar{view-transition-name:sitebar}
.sitefoot{view-transition-name:sitefoot}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
}

@media print{
  .sitebar,.sitefoot,.skip{display:none !important}
}
