/* ---------- v8: blue + white identity ----------
   Light = white with a cool blue tint (default).  Dark = deep navy.  One accent family: royal blue → sky blue.
   Semantic colours (errors, success) are the only non-blue hues left on purpose. */
:root{--accent:#1f6bff;--accent2:#4d94ff;--accent-ink:#ffffff;--grad:linear-gradient(135deg,#1558e8 0%,#1f6bff 45%,#4da3ff 100%);
  --shadow-sm:0 1px 2px rgba(10,40,110,.06);--shadow-md:0 14px 34px -18px rgba(15,70,190,.35);--shadow-lg:0 30px 70px -30px rgba(10,50,160,.45)}
:root[data-theme=light]{--bg:#f4f8ff;--bg2:#ffffff;--panel:#ffffff;--line:#dbe6f8;--line2:#c3d5f1;--text:#0a1a3a;--muted:#4f6489;color-scheme:light}
:root[data-theme=dark]{--bg:#050d1c;--bg2:#08142b;--panel:#0b1a36;--line:#15294d;--line2:#24406d;--text:#eef4ff;--muted:#8ea7cd;--accent:#3b82ff;--accent2:#7ab2ff;--shadow-md:0 14px 34px -16px rgba(0,0,0,.7);color-scheme:dark}
html{background:var(--bg)}
body{background:var(--bg);color:var(--text)}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.swatches{display:none!important}

/* primary actions: blue gradient with a soft glow */
.btn.primary,.signin,.hs-go,.avatar,.cv-new,.badge,.auth-mark{background:var(--grad)!important;color:#fff!important;border-color:transparent!important}
.btn.primary,.signin,.hs-go{box-shadow:0 10px 26px -12px color-mix(in srgb,var(--accent) 80%,transparent)}
.btn.primary:hover,.signin:hover,.hs-go:hover{box-shadow:0 16px 34px -12px color-mix(in srgb,var(--accent) 85%,transparent);filter:none}
.btn.primary::before{background:rgba(255,255,255,.22)}
.btn.primary:hover{color:#fff}
.brand-mark::before{background:var(--grad)}
.boot-mark{background:var(--grad)}
.progress i{background:var(--grad)}
.pulse,.pill .dot{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}

/* hero: gradient headline line + soft sky glow */
.hero2 .line.accent>span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero2 .hero-bg{background:radial-gradient(70% 60% at 50% -5%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),radial-gradient(40% 40% at 90% 30%,color-mix(in srgb,var(--accent2) 14%,transparent),transparent 70%),var(--bg)}
.waves path{stroke:color-mix(in srgb,var(--accent) 45%,transparent)}
.waves path.hot{stroke:color-mix(in srgb,var(--accent2) 35%,transparent)}
.hero-grid{background-image:linear-gradient(color-mix(in srgb,var(--accent) 10%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,transparent) 1px,transparent 1px)}

/* surfaces: white cards with a faint blue border and blue-tinted shadow */
.card,.tile,.spot,.panel,.fx-row,.fx-comment,.fx-list li,.facts,.stat,.pn a,.fx-hero,.auth-card,.dd-btn,.search input,.chip,.pchip,.seg,.kbtn,.saved-link,.iconbtn,.tbl-wrap,.fx-card-form,.fx-form,.fx-note{border-color:var(--line)}
.card,.tile,.spot,.panel,.stat,.fx-row,.fx-hero{box-shadow:var(--shadow-sm)}
.card:hover,.tile:hover,.spot:hover{box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--accent) 38%,var(--line))}
.card h3 a{background-image:linear-gradient(var(--accent),var(--accent))}
.chip[aria-pressed=true],.seg button[aria-pressed=true]{background:var(--grad);border-color:transparent;color:#fff}
.chip[aria-pressed=true]::before{background:rgba(255,255,255,.18)}
.chip.active-chip{background:color-mix(in srgb,var(--accent) 12%,var(--panel));border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--text)}
.switch[aria-checked=true] .track{background:color-mix(in srgb,var(--accent) 22%,var(--panel));border-color:var(--accent)}
.switch[aria-checked=true] .knob{background:var(--grad)}
.meter i,.bar .col i{background:var(--grad)}
.nav-pill{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.site-header nav a[aria-current=page]::after{background:var(--accent)}
.fx-pick{color:var(--accent)!important;border-color:color-mix(in srgb,var(--accent) 45%,transparent)!important}
.stars button.on,.stars button:hover{color:var(--accent)}
.fx-day .bd{background:var(--accent)}
.sec-head>div::after{background:var(--grad)}
:focus-visible{outline-color:var(--accent)}
.dd-list li:hover,.dd-list li.focus{border-color:var(--accent)}
.pal li[aria-selected=true]{border-color:var(--accent)}
a.fx-link,.switch-auth a,.prose a{color:var(--accent)}
.btn:hover{border-color:var(--accent)}
.btn::before{background:var(--accent)}
.btn:not(.primary):hover{color:#fff}

/* inputs */
.fld input:focus,.fld select:focus,.fld textarea:focus,.sel:focus,.search input:focus,.hsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}

/* tidy scrollbars in both themes */
*{scrollbar-color:color-mix(in srgb,var(--accent) 45%,var(--line2)) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 35%,var(--line2));border-radius:10px;border:3px solid var(--bg)}
::-webkit-scrollbar-track{background:var(--bg)}

/* light-theme finish: airy white header, blue-tinted page glow */
:root[data-theme=light] body{background:linear-gradient(180deg,#ffffff 0,#f4f8ff 420px,#f4f8ff 100%) no-repeat,var(--bg)}
:root[data-theme=light] .site-header{background:rgba(255,255,255,.86);border-bottom-color:var(--line)}
:root[data-theme=light] .hero2 .hero-bg{background:radial-gradient(70% 60% at 50% -5%,rgba(31,107,255,.16),transparent 70%),radial-gradient(40% 45% at 92% 28%,rgba(77,148,255,.16),transparent 70%),linear-gradient(180deg,#ffffff,#f4f8ff)}
:root[data-theme=light] .hero2 h1{color:#0a1a3a}
:root[data-theme=light] .hero2 .lede{color:#1d2f55}
:root[data-theme=light] .hsearch{background:#fff;box-shadow:0 24px 60px -34px rgba(15,70,190,.45)}
:root[data-theme=light] .card:hover,:root[data-theme=light] .tile:hover{box-shadow:0 26px 54px -26px rgba(15,70,190,.4)}
:root[data-theme=light] .site-footer{background:#fff;border-top:1px solid var(--line)}
:root[data-theme=dark] .site-header{background:rgba(5,13,28,.82)}
:root[data-theme=dark] body{background:radial-gradient(80% 50% at 50% -10%,rgba(59,130,255,.14),transparent 70%) no-repeat,var(--bg)}

/* nav labels never wrap (Spanish labels are longer) */
.site-header nav a{white-space:nowrap}
.wrap.lib-head{padding-left:var(--gutter);padding-right:var(--gutter)}

/* header: the nav + 6 action buttons need room, so wrap it below 1360px instead of overflowing */
@media (max-width:1500px){.site-header nav a{padding:8px 9px;font-size:.84rem}}
@media (max-width:1360px){
  .site-header{height:auto!important;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  .hdr-actions{margin-left:auto}
  .site-header nav{order:3;flex:0 0 100%;margin:6px 0 0!important;overflow-x:auto;scrollbar-width:none}
  .site-header nav::-webkit-scrollbar{display:none}
  .toolbar{position:static}
  .kbtn .kt{display:none}.kbtn{min-width:0}
}
/* the wrapper of the accent headline line must not paint its own (old, warm) gradient */
.hero2 .line.accent{background:none!important}

/* ---------- accessibility fixes (found by tests/a11y-check.js) ---------- */
:root[data-theme=light]{--accent2:#2b6df0}
.fine,.hero2 .fine,.hero2 .lede2{color:var(--muted)!important}
:root .hero2 .stats2 .mono,:root .stats2 .mono{color:var(--muted)}
:root[data-theme=light] .tiles.creators .tile b{color:color-mix(in srgb,var(--h) 62%,#0a1a3a)}
:root[data-theme=dark] .tag[style],:root[data-theme=dark] .tiles.creators .tile b{color:color-mix(in srgb,var(--h) 55%,#ffffff)}
.creator-tiktok-link a{color:var(--accent)}
.stars button{color:#6f86ad}
.stars button.on,.stars button:hover{color:var(--accent)}
.auth-overline,.auth-divider,.auth-card .switch-auth,.switch-auth{color:var(--muted)}
.skip{background:#1558e8!important;color:#fff!important}
.foot-links a,.foot-links button{display:inline-flex;align-items:center;min-height:32px;padding:4px 8px}
.fx-link{padding:2px 0}
/* a visible, high-contrast focus ring everywhere */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
@media (prefers-contrast:more){
  :root[data-theme=light]{--line:#8da2c5;--line2:#5f7aa8;--muted:#2a3d63}
  :root[data-theme=dark]{--line:#4a66a0;--line2:#7d99d0;--muted:#c3d3f0}
  .card,.tile,.panel,.chip,.btn{border-width:2px}
}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* text-safe accent: links in body text need 4.5:1 on both backgrounds */
:root{--accent-text:#1858d8}
:root[data-theme=dark]{--accent-text:#8cb6ff}
.creator-tiktok-link a,.fx-link,.prose a,.switch-auth a,a.fx-link,.ai-where a{color:var(--accent-text)}