/* ============================================================
   PayoutCal design system: tokens, layout, components.
   Feature pages add their own file under /static/css/<page>.css
   ============================================================ */
:root{
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bg:#f6f7f6; --surface:#ffffff; --surface-2:#eef2f0; --text:#101828; --muted:#5f6b76; --border:#e3e8e5;
  --primary:#0f766e; --primary-hover:#115e59; --primary-soft:#ccfbf1; --on-primary:#ffffff;
  --accent:#16a34a; --pos:#15803d; --pos-soft:#dcfce7; --neg:#dc2626; --neg-soft:#fee2e2; --warn:#b45309; --warn-soft:#fef3c7;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06); --shadow-lg:0 10px 30px -10px rgba(16,24,40,.18);
  --radius:12px; --radius-sm:8px; --container:1140px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0c1210; --surface:#141c19; --surface-2:#1b2521; --text:#e7ece9; --muted:#9aa7a1; --border:#26332e;
  --primary:#2dd4bf; --primary-hover:#5eead4; --primary-soft:#134e4a; --on-primary:#062421;
  --pos:#4ade80; --pos-soft:#14532d; --neg:#f87171; --neg-soft:#7f1d1d; --warn:#fbbf24; --warn-soft:#78350f;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 10px 30px -10px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --bg:#0c1210; --surface:#141c19; --surface-2:#1b2521; --text:#e7ece9; --muted:#9aa7a1; --border:#26332e;
  --primary:#2dd4bf; --primary-hover:#5eead4; --primary-soft:#134e4a; --on-primary:#062421;
  --pos:#4ade80; --pos-soft:#14532d; --neg:#f87171; --neg-soft:#7f1d1d; --warn:#fbbf24; --warn-soft:#78350f;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 10px 30px -10px rgba(0,0,0,.6);
}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:15.5px;line-height:1.55;color:var(--text);background:var(--bg);font-feature-settings:"tnum" 1,"cv11" 1}
a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.7rem,3.2vw,2.5rem)} h2{font-size:1.4rem;margin-top:1.6em} h3{font-size:1.1rem} h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
p{margin:0 0 1em} small{font-size:.82em} .muted{color:var(--muted)} .fineprint{font-size:.78rem;color:var(--muted);margin-top:2rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
main{min-height:60vh;padding:28px 20px 60px}
.narrow{max-width:760px} .center{text-align:center}
.pos{color:var(--pos)} .neg{color:var(--neg)} .mono{font-family:var(--mono)} .nowrap{white-space:nowrap}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;gap:18px;height:62px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.15rem;color:var(--text);letter-spacing:-.02em;white-space:nowrap}
.brand:hover{text-decoration:none} .brand-mark{width:28px;height:28px;color:var(--primary)} .brand.small{font-size:1rem;margin-bottom:6px}
.search{position:relative;flex:1;max-width:460px}
.search input{width:100%;height:40px;border:1px solid var(--border);border-radius:999px;padding:0 16px 0 40px;background:var(--surface-2);color:var(--text);font:inherit;font-size:.92rem;outline:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235f6b76' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px center}
.search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.search-results{position:absolute;top:46px;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;z-index:60}
.search-results a{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;color:var(--text);border-bottom:1px solid var(--border);font-size:.92rem}
.search-results a:last-child{border-bottom:0} .search-results a:hover,.search-results a.active{background:var(--surface-2);text-decoration:none}
.search-results .sym{font-weight:700;min-width:64px} .search-results .nm{flex:1;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .search-results .yl{font-variant-numeric:tabular-nums;color:var(--pos)}
.nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-links>a{padding:8px 11px;border-radius:var(--radius-sm);color:var(--text);font-weight:500;font-size:.93rem}
.nav-links>a:hover{background:var(--surface-2);text-decoration:none}
.nav-links>a.btn{padding:0 14px;color:var(--on-primary)}
.theme-toggle,.nav-burger{border:1px solid var(--border);background:var(--surface);color:var(--text);width:36px;height:36px;border-radius:var(--radius-sm);cursor:pointer;font-size:1rem}
.nav-burger{display:none}
@media (max-width:900px){
  .nav-inner{flex-wrap:wrap;height:auto;padding:10px 0}
  .search{order:3;flex-basis:100%;max-width:none}
  .nav-burger{display:inline-flex;align-items:center;justify-content:center}
  .nav-links>a{display:none} .nav-links.open>a{display:block;width:100%}
  .nav-links{flex-wrap:wrap} .nav-links.open{flex-basis:100%;order:4;padding-top:8px}
}

/* buttons, badges, forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;white-space:nowrap;transition:background .15s,transform .05s}
.btn:hover{text-decoration:none;background:var(--surface-2)} .btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)} .btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.ghost{background:transparent} .btn.small{height:32px;padding:0 12px;font-size:.84rem} .btn.large{height:48px;padding:0 24px;font-size:1rem} .btn.block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.74rem;font-weight:600;line-height:1.5;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.badge.good{background:var(--pos-soft);color:var(--pos)} .badge.bad{background:var(--neg-soft);color:var(--neg)} .badge.warn{background:var(--warn-soft);color:var(--warn)} .badge.primary{background:var(--primary-soft);color:var(--primary)}
input[type=text],input[type=email],input[type=number],input[type=search],input[type=date],select,textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);height:40px;padding:0 12px;width:100%}
textarea{height:auto;padding:10px 12px} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
label{font-size:.85rem;font-weight:600;color:var(--muted);display:block;margin-bottom:4px}
.field{margin-bottom:14px} .form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.inline-search{display:flex;gap:8px;max-width:420px;margin:0 auto 1rem} .inline-search input{flex:1}
input[type=range]{width:100%;accent-color:var(--primary)}

/* layout blocks */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card.flush{padding:0;overflow:hidden} .card h2:first-child,.card h3:first-child{margin-top:0}
.grid{display:grid;gap:18px} .grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start} @media (max-width:960px){.two-col{grid-template-columns:1fr}}
.sidebar{position:sticky;top:78px;display:grid;gap:16px}
.section{margin-top:36px} .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px} .section-head h2{margin:0}
.hero{padding:36px 0 20px} .hero h1{font-size:clamp(2rem,4.5vw,3.1rem);letter-spacing:-.03em;max-width:820px} .lead{font-size:1.15rem;color:var(--muted);max-width:640px}
.empty{text-align:center;padding:60px 0}
.breadcrumbs{font-size:.82rem;color:var(--muted);margin-bottom:8px} .breadcrumbs a{color:var(--muted)} .breadcrumbs span{margin:0 6px}
.callout{border-left:4px solid var(--primary);background:var(--surface);padding:12px 16px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:1em 0} .callout.warn{border-color:var(--warn)}

/* stats */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}
.stat .k{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;display:block;margin-bottom:4px}
.stat .v{font-size:1.35rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .stat .v.sm{font-size:1.05rem}
.stat .s{font-size:.78rem;color:var(--muted);display:block;margin-top:2px}
.stat.hl{background:var(--primary-soft);border-color:transparent} .stat.hl .v,.stat.hl .k{color:var(--primary)}

/* tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;vertical-align:middle}
th{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;background:var(--surface-2);position:sticky;top:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0} tbody tr:hover td{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
td .sym{font-weight:700} td .nm{display:block;font-size:.78rem;color:var(--muted);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
th a{color:inherit} th a.sorted{color:var(--primary)}
.table-actions{display:flex;gap:8px;justify-content:flex-end;margin:8px 0}

/* charts (server-side SVG) */
.chart{width:100%;height:auto;display:block} .chart .bar{fill:var(--primary)} .chart .bar.special{fill:var(--warn)} .chart .axis{stroke:var(--border)} .chart text{fill:var(--muted);font-size:11px;font-family:var(--font)}
.spark{width:100px;height:26px;vertical-align:middle} .spark path{fill:none;stroke:var(--primary);stroke-width:1.6}

/* payday calendar grid */
.months{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.month{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;min-height:88px}
.month .m{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600} .month .t{font-size:1.2rem;font-weight:700;margin:4px 0} .month .c{font-size:.76rem;color:var(--muted)}
.month.zero{opacity:.55}

/* affiliate + capture + ads */
.cta-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;display:grid;gap:8px}
.cta-offer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text)} .cta-offer:hover{text-decoration:none;background:var(--primary-soft)}
.cta-offer strong{display:block} .cta-offer span{font-size:.84rem;color:var(--muted)}
.capture{margin:10px 0} .capture-row{display:flex;gap:8px;flex-wrap:wrap} .capture-row input{flex:1;min-width:200px}
.ad-slot{margin:20px 0;min-height:90px;display:flex;justify-content:center}

/* prose (guides, legal) */
.prose{max-width:760px} .prose h2{margin-top:1.8em} .prose p,.prose li{font-size:1.02rem;line-height:1.7} .prose img{max-width:100%;border-radius:var(--radius)} .prose table{font-size:.95rem} .prose blockquote{border-left:3px solid var(--primary);margin:1em 0;padding:4px 16px;color:var(--muted)}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);padding:1px 5px;border-radius:4px}
.toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin:1em 0} .toc ol{margin:0;padding-left:18px}

/* footer */
.footer{border-top:1px solid var(--border);background:var(--surface);padding:40px 0 30px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px} @media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer a{display:block;color:var(--text);padding:3px 0;font-size:.92rem} .footer h4{margin-bottom:8px}

/* utilities */
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .between{justify-content:space-between} .mt{margin-top:1rem} .mb{margin-bottom:1rem} .mt-0{margin-top:0}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.pill{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.85rem;font-weight:500}
.pill:hover{text-decoration:none;background:var(--surface-2)} .pill.active{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.tag{font-size:.72rem;padding:1px 7px;border-radius:6px;background:var(--surface-2);color:var(--muted);margin-right:4px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:.9rem;box-shadow:var(--shadow-lg);z-index:100;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}
.pro-lock{position:relative} .pro-lock .lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(3px);border-radius:var(--radius);text-align:center;padding:20px}