/* Algorithm v2 — site chrome: header, Tools menu, mobile menu, footer.
   Loaded on every page. Every rule is scoped to .site-header / .mobile-menu /
   .site-footer, so it works next to the legacy style.css without touching
   page bodies, and legacy rules (.logo, .btn-primary, footer) can't leak in.
   Token names below don't exist in tokens.css, so defining them on :root is safe. */
@font-face { font-family: 'Geist'; src: url('/fonts/geist/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/geist/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

/* ── Theme tokens: the one colour source for the site ──
   Dark is the default (no attribute). Light: <html data-theme="light">, set
   before first paint by components.js from localStorage "algo-theme".
   Rule of thumb for page CSS/JS: never write a colour literal; use these.
     rgba(var(--fg-rgb), a)      tints, lines and faded text (white in dark, ink in light)
     rgba(var(--bg-rgb), a)      translucent page background (sticky bars, fades)
     rgba(var(--accent-rgb), a) / --good-rgb / --warn-rgb / --bad-rgb / --info-rgb
     rgba(var(--shadow-rgb), calc(a * var(--shadow-k)))   shadows (lighter in light)
     --inverse / --on-inverse    the primary button (light on dark, dark on light) */
:root {
    color-scheme: dark;
    --bg: #08090b;
    --bg-raised: #0f1013;
    --bg-overlay: #15161a;
    --bg-hover: #1b1c21;
    --line: rgba(var(--fg-rgb), 0.07);
    --line-strong: rgba(var(--fg-rgb), 0.12);
    --text: #ededf0;
    --text-2: #a1a4ad;
    --text-3: #6c6f78;
    --text-lead: #b6b9c1;
    --text-strong: #ffffff;
    --accent: #8a8cf6;
    --accent-hover: #a3a5f8;
    --accent-soft: rgba(var(--accent-rgb), 0.14);
    --good: #4fb98a;
    --warn: #d9a441;
    --bad: #e0605e;
    --info: #7a9fd4;
    --fg-rgb: 255, 255, 255;
    --bg-rgb: 8, 9, 11;
    --accent-rgb: 138, 140, 246;
    --good-rgb: 79, 185, 138;
    --warn-rgb: 217, 164, 65;
    --bad-rgb: 224, 96, 94;
    --info-rgb: 122, 159, 212;
    --text-2-rgb: 161, 164, 173;
    --text-3-rgb: 108, 111, 120;
    --shadow-rgb: 0, 0, 0;
    --shadow-k: 1;
    --well-rgb: 0, 0, 0;
    --well-k: 1;
    --inverse: #ededf0;
    --inverse-hover: #ffffff;
    --on-inverse: #0b0c0e;
    --header-bg: rgba(var(--bg-rgb), 0.78);
    --bad-soft: #f0a3a1;
    --good-soft: #9bdcbf;
    --cat-cyan: #22b8cf;
    --cat-cyan-rgb: 34, 184, 207;
    --cat-violet: #b45ec8;
    --cat-violet-rgb: 180, 94, 200;
    --cat-teal: #14b8a6;
    --cat-pink: #e879f9;
}
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f6f6f7;
    --bg-raised: #ffffff;
    --bg-overlay: #ffffff;
    --bg-hover: #eeeef0;
    --line: rgba(17, 18, 23, 0.08);
    --line-strong: rgba(17, 18, 23, 0.14);
    --text: #16171b;
    --text-2: #575a63;
    --text-3: #7b7e87;
    --text-lead: #3e4048;
    --text-strong: #000000;
    --accent: #5b5ee0;
    --accent-hover: #4a4dd0;
    --accent-soft: rgba(91, 94, 224, 0.1);
    --good: #1f8a5c;
    --warn: #a86f0c;
    --bad: #cc3f3c;
    --info: #3d6cb3;
    --fg-rgb: 17, 18, 23;
    --bg-rgb: 246, 246, 247;
    --accent-rgb: 91, 94, 224;
    --good-rgb: 31, 138, 92;
    --warn-rgb: 168, 111, 12;
    --bad-rgb: 204, 63, 60;
    --info-rgb: 61, 108, 179;
    --text-2-rgb: 87, 90, 99;
    --text-3-rgb: 123, 126, 135;
    --shadow-rgb: 18, 20, 32;
    --shadow-k: 0.22;
    --well-rgb: 17, 18, 23;
    --well-k: 0.12;
    --inverse: #16171b;
    --inverse-hover: #000000;
    --on-inverse: #ffffff;
    --header-bg: rgba(246, 246, 247, 0.82);
    --bad-soft: #cc3f3c;
    --good-soft: #1f8a5c;
    --cat-cyan: #0e7d8f;
    --cat-cyan-rgb: 14, 125, 143;
    --cat-violet: #8a3fa6;
    --cat-violet-rgb: 138, 63, 166;
    --cat-teal: #0f8577;
    --cat-pink: #b03fc0;
}
:root {
    --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --r-xs: 4px;
    --r-sm: 6px;
    --r: 8px;
    --r-lg: 12px;
    --r-xl: 20px;
    /* Page grid: 1440 max including 64px side gutters (1312 content) */
    --wrap: 1440px;
    --gutter: 64px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (max-width: 1100px) { :root { --gutter: 32px; } }
@media (max-width: 720px) { :root { --gutter: 20px; } }
@media (max-width: 480px) { :root { --gutter: 16px; } }

/* ---------- Shared reset inside chrome ---------- */
.site-header, .mobile-menu, .site-footer {
    font-family: var(--font); color: var(--text);
    font-size: 16px; line-height: 1.6; text-align: left;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'ss01' on;
}
.site-header *, .site-header *::before, .site-header *::after,
.mobile-menu *, .mobile-menu *::before, .mobile-menu *::after,
.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; }
.site-header a, .mobile-menu a, .site-footer a { color: inherit; text-decoration: none; }
.site-header button, .mobile-menu button { font: inherit; color: inherit; }
.site-header :focus-visible, .mobile-menu :focus-visible, .site-footer :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
.site-header .wrap, .site-footer .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Buttons used in the chrome (full declarations: legacy .btn-primary must not leak) */
.site-header .btn, .mobile-menu .btn {
    position: static; overflow: visible;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 36px; padding: 0 16px; margin: 0;
    border-radius: var(--r); border: 1px solid transparent; background: transparent;
    font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; line-height: 1;
    color: var(--text); cursor: pointer; white-space: nowrap; box-shadow: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.site-header .btn-primary, .mobile-menu .btn-primary { background: var(--inverse); color: var(--on-inverse); border-color: transparent; }
.site-header .btn-primary:hover, .mobile-menu .btn-primary:hover { background: var(--inverse-hover); border-color: transparent; }
.site-header .btn-ghost, .mobile-menu .btn-ghost { border-color: var(--line-strong); }
.site-header .btn-ghost:hover, .mobile-menu .btn-ghost:hover { background: var(--bg-hover); }
.site-header .btn-quiet { color: var(--text-2); padding: 0 12px; }
.site-header .btn-quiet:hover { color: var(--text); background: transparent; }
.mobile-menu .btn-lg { height: 42px; padding: 0 20px; font-size: 15px; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    min-height: 64px;
    border-bottom: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s;
}
.site-header.is-scrolled {
    background: var(--header-bg);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom-color: var(--line);
}
/* Header sits on the same 2-column grid as .hero-split / .section-head:
   logo in column 1; nav starts at column 2 (lines up with the hero subtitle),
   actions at the end of column 2. */
.site-header .header-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: center; height: 64px; }
.site-header .logo { justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; color: var(--text); }
.site-header .header-actions { grid-column: 2; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 6px; }
.site-header .header-auth { display: flex; align-items: center; }
.site-header .user-profile { display: flex; align-items: center; gap: 6px; }
.site-header .nav { grid-column: 2; grid-row: 1; justify-self: start; display: flex; align-items: center; gap: 2px; margin-left: -12px; white-space: nowrap; }
.site-header .nav > a, .site-header .nav-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px; border-radius: var(--r);
    font-size: 14px; color: var(--text-2); background: none; border: 0; cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.site-header .nav > a:hover, .site-header .nav-trigger:hover, .site-header .nav-trigger[aria-expanded="true"] { color: var(--text); background: var(--bg-hover); }
.site-header .nav > a[aria-current="page"], .site-header .nav-trigger[data-current="true"] { color: var(--text); }
.site-header .nav-trigger svg { width: 10px; height: 10px; transition: transform 0.2s var(--ease); }
.site-header .nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Theme switch: sun in dark (go light), moon in light (go dark) */
.site-header .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--text-2); cursor: pointer; }
.site-header .theme-toggle:hover { color: var(--text); background: var(--bg-hover); }
.site-header .theme-toggle svg, .mobile-menu .mm-theme svg { width: 16px; height: 16px; }
.site-header .theme-toggle .i-moon, .mobile-menu .mm-theme .i-moon { display: none; }
:root[data-theme="light"] .site-header .theme-toggle .i-sun, :root[data-theme="light"] .mobile-menu .mm-theme .i-sun { display: none; }
:root[data-theme="light"] .site-header .theme-toggle .i-moon, :root[data-theme="light"] .mobile-menu .mm-theme .i-moon { display: block; }
.mobile-menu .mm-theme { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 20px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit; font-size: 17px; text-align: left; cursor: pointer; }
.site-header .menu-toggle { display: none; width: 36px; height: 36px; padding: 0; border-radius: var(--r); border: 1px solid var(--line-strong); background: none; cursor: pointer; align-items: center; justify-content: center; }
.site-header .menu-toggle svg { width: 16px; height: 16px; }
.site-header .menu-toggle .i-close, .site-header .menu-toggle[aria-expanded="true"] .i-open { display: none; }
.site-header .menu-toggle[aria-expanded="true"] .i-close { display: block; }

/* Tools mega menu */
/* The nav starts mid-header, so the menu is anchored to the header's right edge */
.site-header .nav-item { position: static; }
.site-header .mega {
    position: absolute; top: calc(100% - 4px); right: var(--gutter); z-index: 60;
    width: min(800px, calc(100vw - 2 * var(--gutter))); padding: 8px;
    background: var(--bg-overlay); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    box-shadow: 0 24px 64px rgba(var(--shadow-rgb), calc(0.55 * var(--shadow-k)));
    display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 4px;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 0.16s, transform 0.16s var(--ease), visibility 0.16s;
}
.site-header .mega.is-open { opacity: 1; visibility: visible; transform: none; }
.site-header .mega-col { padding: 10px 8px; }
.site-header .mega-col + .mega-col { border-left: 1px solid var(--line); }
.site-header .mega-title { font-size: 12px; color: var(--text-3); padding: 0 8px 8px; }
.site-header .mega a { display: block; padding: 7px 8px; border-radius: var(--r-sm); }
.site-header .mega a:hover { background: var(--bg-hover); }
.site-header .mega a b { display: block; font-weight: 500; font-size: 14px; color: var(--text); }
.site-header .mega a span { display: block; font-size: 12.5px; color: var(--text-3); line-height: 1.4; margin-top: 1px; }
.site-header .mega-col--plain a { padding: 6px 8px; font-size: 14px; color: var(--text-2); }
.site-header .mega-col--plain a:hover { color: var(--text); }
.site-header .mega-foot { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 4px; padding: 10px 16px 6px; display: flex; justify-content: space-between; font-size: 13px; color: var(--text-3); }
.site-header .mega-foot a { display: inline; padding: 0; color: var(--text-2); }
.site-header .mega-foot a:hover { background: none; color: var(--text); }
/* "Free" / "Free tier" badge next to a tool name (mega menu, mobile menu): quiet grey outline, so it doesn't pull focus */
.site-header .m-free, .mobile-menu .m-free,
.site-header .mega a span.m-free {
    display: inline-block; margin: 0 0 0 8px; padding: 0 6px;
    font-size: 11px; font-weight: 400; line-height: 17px; letter-spacing: 0.01em; color: var(--text-3);
    border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: none;
    vertical-align: 1px; white-space: nowrap;
}
/* Mid widths: half a column is too narrow for nav + actions, so the header becomes a row */
@media (max-width: 1100px) and (min-width: 861px) {
    .site-header .header-row { display: flex; }
    .site-header .nav { margin-left: 28px; }
    .site-header .header-actions { margin-left: auto; }
}

/* User badge from auth.js, restyled to sit in the v2 header */
.site-header .algo-user-badge { height: 40px; padding: 0 12px 0 6px; gap: 10px; border-radius: var(--r); border: 1px solid var(--line-strong); background: transparent; font-family: var(--font); }
.site-header .algo-user-badge:hover { background: var(--bg-hover); }
.site-header .algo-user-badge__avatar { width: 28px; height: 28px; border-radius: 50%; }
.site-header .algo-user-badge__name { font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--text); }
.site-header .algo-user-badge__credits { font-family: var(--mono); font-size: 11.5px; line-height: 1.3; }
.site-header .algo-user-dropdown { right: 0; left: auto; }

/* ---------- Mobile menu ---------- */
.mobile-menu { display: none; }

/* ---------- Footer ---------- */
.site-footer { margin: 0; border-top: 1px solid var(--line); padding: 64px 0 40px; font-size: 14px; color: var(--text); background: transparent; }
.site-footer .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.site-footer .logo { display: inline-flex; margin: 0; font-family: var(--font); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; color: var(--text); }
.site-footer h4 { margin: 0 0 14px; font-size: 13px; font-weight: 500; color: var(--text); font-family: var(--font); letter-spacing: 0; text-transform: none; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.site-footer li { margin: 0; padding: 0; }
.site-footer .footer-grid a { color: var(--text-3); transition: color 0.15s; }
.site-footer .footer-grid a:hover { color: var(--text); }
.site-footer .footer-brand p { margin: 14px 0 0; color: var(--text-3); max-width: 24em; font-size: 13.5px; line-height: 1.55; }
/* Bottom row uses the footer-grid columns, so Privacy / Terms start under the last column (Free tools) */
.site-footer .footer-bottom { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 16px 32px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 13px; }
.site-footer .footer-bottom nav { grid-column: -2; }
.site-footer .footer-bottom nav { display: flex; gap: 20px; }
.site-footer .footer-bottom a:hover { color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .site-footer .footer-grid { grid-template-columns: repeat(3, 1fr); }
    .site-footer .footer-brand { grid-column: 1 / -1; }
    .site-footer .footer-bottom { display: flex; justify-content: space-between; }
}
@media (max-width: 860px) {
    .site-header .nav, .site-header .header-actions .btn-quiet { display: none; }
    .site-header .header-row { display: flex; justify-content: space-between; }
    .site-header .menu-toggle { display: inline-flex; }
    .site-header .theme-toggle { display: none; }
    .site-header .algo-user-badge > div:nth-child(2) { display: none; }
    .site-header .algo-user-badge { padding: 0 6px; }
    .mobile-menu { position: fixed; inset: 64px 0 0 0; z-index: 49; background: var(--bg); overflow-y: auto; padding: 8px var(--gutter) 40px; }
    .mobile-menu.is-open { display: block; }
    .mobile-menu h4 { margin: 24px 0 6px; font-size: 13px; font-weight: 500; color: var(--text-3); }
    .mobile-menu a:not(.btn) { display: block; padding: 10px 0; font-size: 17px; border-bottom: 1px solid var(--line); }
    .mobile-menu .btn { display: flex; width: 100%; margin-top: 12px; }
    .mobile-menu .mm-actions { margin-top: 16px; }
}
@media (max-width: 720px) {
    .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
    .site-footer .footer-bottom { flex-direction: column; }
}
@media print {
    .site-header, .mobile-menu, .site-footer { display: none !important; }
}

/* Admin-only tools (21.10.2026): links to tools that are visible to admins only
   for now. <html>.algo-admin is set by components.js / auth.js; the pages
   themselves are gated by the server (backend/middleware/admin-pages.js). */
html:not(.algo-admin) .algo-admin-only { display: none !important; }