/*
  style.css: how the page looks.
  Written "mobile-first": the base rules are for phones, and the
  @media rule near the bottom adds tweaks for wider screens.
*/

/* ---- Brand settings. Change the accent here and it updates everywhere. ---- */
:root {
  /* RogueIQ brand tokens: Cyan + Ember (same as rogueiq.com) */
  --bg: #07090A;          /* near-black background */
  --text: #F5EFE6;        /* warm off-white text */
  --muted: #9A948C;       /* secondary text */
  --line: #1f2326;        /* thin borders */
  --card: #0d1012;        /* dark card background */
  --accent: #22E6D0;      /* acid cyan: buttons, links, chart line */
  --accent-deep: #0EA5A4; /* deep cyan */
  --accent-ink: #07090A;  /* text on cyan */
  --gradient: linear-gradient(90deg, var(--accent-deep), var(--accent)); /* sparingly */
  --ember: #FF7A1A;       /* ONE highlight: the main result line */
  --field: #050607;
  --radius: 14px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* Make the "hidden" attribute always win, even over display: flex/grid below */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text); text-decoration-color: var(--accent); }

/* Small @rogueiq tag */
.topbar { padding: 16px 20px 0; }
.tag {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 20px 40px;
}

/* ---- Intro ---- */
.hero { padding: 16px 0 8px; }
.eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}
h1 { font-size: 30px; line-height: 1.15; font-weight: 800; margin: 0 0 12px; letter-spacing: -0.02em; }
.lede { color: var(--muted); margin: 0 0 8px; font-size: 16px; }

/* ---- Cards ---- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin: 20px 0;
}

/* ---- Form ---- */
.field { margin-bottom: 18px; }
label { display: block; font-weight: 700; margin-bottom: 8px; }
input {
  width: 100%;
  font: inherit;
  font-size: 18px;               /* 16px+ stops iPhones from zooming in on tap */
  color: var(--text);
  background: var(--field);
  border: 1px solid #2c3236;
  border-radius: 10px;
  padding: 12px 14px;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.hint { color: var(--muted); font-size: 13px; margin: 8px 0 0; }

/* "Compare against" dropdown */
select {
  width: 100%;
  font: inherit;
  font-size: 17px;
  color: var(--text);
  background: var(--field);
  border: 1px solid #2c3236;
  border-radius: 10px;
  padding: 12px 14px;
  appearance: none;               /* remove the default grey look */
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.subfield { margin-top: 14px; }

/* Plain-language notice when the age group was widened */
.notice {
  border-left: 3px solid var(--accent);
  background: var(--card);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  margin: 0 0 18px;
}

/* Age group "chips" */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip {
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border: 1px solid #2c3236;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}
.chip:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }

.btn {
  width: 100%;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  padding: 14px 18px;
  cursor: pointer;
}
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--accent); }
.error { color: #ff8a8a; font-size: 14px; margin: 0 0 12px; }
.privacy { color: var(--muted); font-size: 13px; margin: 12px 0 0; text-align: center; }

/* ---- Results ---- */
.big { font-size: 26px; font-weight: 800; line-height: 1.2; margin: 0 0 6px; letter-spacing: -0.01em; }
.sub { color: var(--muted); margin: 0 0 18px; }
.accent { color: var(--accent); }

.stats { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 22px; }
.stat {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}
.stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.stat-value { font-size: 24px; font-weight: 800; }
.stat-note { font-size: 12px; color: var(--muted); }

.chart-title { font-size: 16px; margin: 0 0 8px; }
.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; }
.chart-note { color: var(--muted); font-size: 12px; margin: 8px 0 18px; }

/* Percentile table */
.cuts { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 14px; }
.cuts caption { text-align: left; font-weight: 700; margin-bottom: 6px; }
.cuts th, .cuts td { text-align: left; padding: 7px 0; border-bottom: 1px solid var(--line); }
.cuts th { color: var(--muted); font-weight: 500; }
.cuts td:last-child, .cuts th:last-child { text-align: right; }
.cuts tr.you-row td { color: var(--accent); font-weight: 700; }

.footnote { color: var(--muted); font-size: 12px; margin: 0; }

/* ---- Signup placeholder ---- */
.signup h2 { margin: 0 0 6px; font-size: 20px; }
.signup p { margin: 0 0 12px; color: var(--muted); }
.signup-row { display: flex; flex-direction: column; gap: 10px; }

/* ---- Footer ---- */
.footer { color: var(--muted); font-size: 12px; padding-top: 8px; }
.footer a { color: var(--muted); }
.disclaimer { color: var(--text); font-size: 13px; }

/* ---- Wider screens (tablets and desktops) ---- */
@media (min-width: 640px) {
  h1 { font-size: 42px; }
  .card { padding: 28px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .signup-row { flex-direction: row; }
  .signup-row .btn { width: auto; white-space: nowrap; }
  .btn { width: auto; }
}

/* "For AI agents" footer link */
.agents { font-size: 13px; opacity: 0.8; }

/* ---- Sliders (paired with the typed fields) ---- */
.slider-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.slider-out { min-width: 72px; text-align: right; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.slider { flex: 1; -webkit-appearance: none; appearance: none; height: 36px; background: transparent; margin: 0; touch-action: pan-y; }
.slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #262b2e; }
.slider::-moz-range-track { height: 6px; border-radius: 3px; background: #262b2e; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--accent); cursor: pointer; }
.slider::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); cursor: pointer; }
.slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
input.slider{border:0 !important;background:transparent !important;padding:0 !important;min-height:0 !important;box-shadow:none !important;width:auto}

/* ---- Cyan + Ember ---- */
.big { color: var(--ember); }  /* the single ember highlight */
.wordmark { font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: -0.01em; }
.wordmark span { color: var(--accent); }
.hero h1 { background: linear-gradient(90deg, var(--text) 55%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* RogueIQ brand (Oct 2026): raven mark, Archivo, grain + glow */
.topbar{display:flex;align-items:center;justify-content:space-between;max-width:960px;margin:0 auto}
.wordmark{display:inline-flex;align-items:center;font-family:'Archivo',var(--font);font-stretch:125%;font-weight:800;letter-spacing:-.005em}
.mark-wrap{position:relative;display:inline-block;width:32px;height:32px;margin-right:8px}.mark-wrap img{width:32px;height:32px;display:block}
.eye{position:absolute;left:54%;top:31%;width:3.5px;height:3.5px;margin:-1.75px 0 0 -1.75px;border-radius:50%;background:#FF6A1A;animation:eyepulse 3.5s ease-in-out infinite}
@keyframes eyepulse{0%,100%{background:#FF6A1A;box-shadow:0 0 3px 1px rgba(255,106,26,.5)}50%{background:#FFC08A;box-shadow:0 0 6px 2px rgba(255,140,60,.95),0 0 14px 5px rgba(255,106,26,.45)}}
@media(prefers-reduced-motion:reduce){.eye{animation:none;box-shadow:0 0 6px 2px rgba(255,106,26,.7)}}
.gnav a{color:var(--muted,#9A948C);text-decoration:none;margin-left:18px;font-size:14px}.gnav a:hover{color:var(--text)}
h1,h2,h3{font-family:'Archivo',var(--font);font-stretch:100%}h1{font-weight:800;letter-spacing:-.03em}h2,h3{font-weight:700}
body{background-image:radial-gradient(60rem 32rem at 30% -8rem,rgba(34,230,208,.08),transparent 70%),radial-gradient(28rem 18rem at 85% 4rem,rgba(255,106,26,.04),transparent 70%);background-repeat:no-repeat}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- Server-rendered tables, FAQ, methodology (build_page.py) ---- */
.prose h2 { font-size: 20px; margin: 22px 0 10px; }
.prose h2:first-of-type { margin-top: 6px; }
.prose h3 { font-size: 16px; margin: 16px 0 4px; }
.prose p, .prose li { color: var(--text); font-size: 15px; }
.prose ul { padding-left: 20px; }
.prose .src { color: var(--muted); font-size: 12px; margin-top: 4px; }
.stat-line { border-left: 3px solid var(--accent); padding-left: 12px; }
.tablewrap { overflow-x: auto; }
.cuts.data td, .cuts.data th { text-align: right; padding: 7px 8px; white-space: nowrap; }
.cuts.data td:first-child, .cuts.data th:first-child { text-align: left; padding-left: 0; }
.updated { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.links-top { font-size: 14px; color: var(--muted); }
.links-top a { color: var(--accent); }
.cite { background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 14px; }
.eyebrow a { color: inherit; text-decoration: none; }
a.btn { display: inline-block; text-decoration: none; text-align: center; }