/* ==========================================================================
   AgLE Online Review — static content pages

   SELF-CONTAINED ON PURPOSE.

   These pages used to link css/styles.css as well, purely to inherit the theme
   variables and one button rule -- 72 KB of application styling on a document
   that uses almost none of it. The prerendered pages are the ones search
   engines actually crawl and measure, so they carry their own copy of the
   foundation instead and load nothing else.

   The block below is COPIED from css/styles.css and must stay in step with it:
   change a theme there and change it here. That duplication is deliberate --
   the alternative is splitting the app stylesheet, which means touching every
   page the app renders to save a few kilobytes on pages that are already fast.
   ========================================================================== */

/* ---------- copied foundation: themes, reset, icons, buttons ---------- */
:root {
  --sb-w: 244px;
  --r-sm: 6.5px;
  --r-md: 10px;
  --r-lg: 13.5px;
  --r-xl: 16.5px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Theme: Default (Dark) ---------- */
:root, [data-theme="dark"] {
  --bg:            #07090b;
  --bg-glow:       rgba(34, 197, 94, .07);
  --sidebar:       #0b0e11;
  --panel:         #0e1216;
  --panel-2:       #12171c;
  --panel-hover:   #161c22;
  --line:          #1c2229;
  --line-soft:     #161b21;
  --text:          #e8edf2;
  --text-dim:      #8c98a4;
  --text-mute:     #6a747f;
  --accent:        #22c55e;
  --accent-ink:    #04140a;
  --accent-soft:   rgba(34, 197, 94, .12);
  --shadow:        0 15px 33px rgba(0, 0, 0, .45);
  --ok:            #22c55e;
  --bad:           #ef4444;
  --warn:          #f59e0b;
  /* "In Progress" status badge. A blue, distinct from --ok/--warn/--bad and
     from every theme accent, so the five card states stay tellable apart. */
  --info:          #60a5fa;
  color-scheme: dark;
}
[data-theme="ocean"] {
  --bg: #05090f; --bg-glow: rgba(56,140,255,.10);
  --sidebar: #080d15; --panel: #0b1220; --panel-2: #0f1728; --panel-hover: #131d31;
  --line: #1a2740; --line-soft: #142033;
  --text: #e6eefb; --text-dim: #8ea4c2; --text-mute: #6d84a3;
  --accent: #38bdf8; --accent-ink: #04121b; --accent-soft: rgba(56,189,248,.13);
  --shadow: 0 15px 33px rgba(0,0,0,.5);
  --ok:#22c55e; --bad:#f87171; --warn:#fbbf24; --info:#7dd3fc;
  color-scheme: dark;
}
[data-theme="forest"] {
  --bg: #050b07; --bg-glow: rgba(34,197,94,.12);
  --sidebar: #071009; --panel: #09150d; --panel-2: #0d1c12; --panel-hover: #112418;
  --line: #17301f; --line-soft: #13271a;
  --text: #e7f4ea; --text-dim: #8fae99; --text-mute: #6f8d79;
  --accent: #34d399; --accent-ink: #04140c; --accent-soft: rgba(52,211,153,.13);
  --shadow: 0 15px 33px rgba(0,0,0,.5);
  --ok:#34d399; --bad:#f87171; --warn:#fbbf24; --info:#60a5fa;
  color-scheme: dark;
}
[data-theme="sunset"] {
  --bg: #0c0703; --bg-glow: rgba(249,115,22,.12);
  --sidebar: #120a04; --panel: #170d05; --panel-2: #1e1208; --panel-hover: #26170b;
  --line: #35200f; --line-soft: #2b1a0c;
  --text: #fbecdd; --text-dim: #bd9c7f; --text-mute: #997c62;
  --accent: #fb923c; --accent-ink: #1a0b02; --accent-soft: rgba(251,146,60,.14);
  --shadow: 0 15px 33px rgba(0,0,0,.5);
  --ok:#4ade80; --bad:#f87171; --warn:#fbbf24; --info:#7dd3fc;
  color-scheme: dark;
}
[data-theme="royal"] {
  --bg: #08050f; --bg-glow: rgba(168,85,247,.12);
  --sidebar: #0c0817; --panel: #110b1e; --panel-2: #171026; --panel-hover: #1d1531;
  --line: #2a1c45; --line-soft: #221737;
  --text: #efe9fb; --text-dim: #a596c4; --text-mute: #8477a3;
  --accent: #a855f7; --accent-ink: #14061f; --accent-soft: rgba(168,85,247,.14);
  --shadow: 0 15px 33px rgba(0,0,0,.5);
  --ok:#4ade80; --bad:#f87171; --warn:#fbbf24; --info:#7dd3fc;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #f4f6f8; --bg-glow: rgba(22,163,74,.08);
  --sidebar: #ffffff; --panel: #ffffff; --panel-2: #f7f9fb; --panel-hover: #eef2f6;
  --line: #e0e6ec; --line-soft: #eaeff4;
  --text: #14202b; --text-dim: #5b6b7a; --text-mute: #7a8896;
  --accent: #16a34a; --accent-ink: #ffffff; --accent-soft: rgba(22,163,74,.10);
  --shadow: 0 10px 25px rgba(15, 35, 55, .10);
  --ok:#16a34a; --bad:#dc2626; --warn:#d97706; --info:#2563eb;
  color-scheme: light;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }

/* The UA rule for [hidden] is display:none, but ANY author `display` on the
   same element outranks it. Several components here set display and are also
   toggled via el.hidden, so make the attribute authoritative once, globally. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(753px 352px at 62% -12%, var(--bg-glow), transparent 70%),
    radial-gradient(586px 318px at 8% 108%, var(--bg-glow), transparent 70%);
  pointer-events: none; z-index: 0;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }

.ico {
  width: 16.5px; height: 16.5px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7.5px;
  padding: 10px 16.5px; border-radius: var(--r-md);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line); background: var(--panel);
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
}
.btn:hover { background: var(--panel-hover); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); border-color: var(--accent); color: var(--accent-ink); }
.btn--danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.btn--danger:hover { background: color-mix(in srgb, var(--bad) 14%, transparent); border-color: var(--bad); }
.btn--sm { padding: 6.5px 11.5px; font-size: 11px; }
.btn[disabled] { opacity: .42; pointer-events: none; }

/* ---------- page layout ---------- */
body.doc {
  /* The app's shell is a flex row with a fixed sidebar; a document page is a
     single readable column, so it opts out of that entirely. */
  display: block;
  line-height: 1.65;
}

/* Keyboard users land here first; it stays off-screen until focused. */
.doc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: 0 0 var(--r-md) 0; font-weight: 700; font-size: 12.5px;
}
.doc-skip:focus { left: 0; }

/* ---------- header ---------- */
.doc-head {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  max-width: 1080px; margin: 0 auto; padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.doc-brand { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.doc-brand strong { font-weight: 800; letter-spacing: .3px; }
.doc-brand__mark { font-size: 22px; line-height: 1; }
.doc-nav { display: flex; gap: 16px; flex-wrap: wrap; margin-left: auto; }
.doc-nav a { color: var(--text-dim); font-size: 12.5px; font-weight: 600; }
.doc-nav a:hover { color: var(--text); }
.doc-nav a[aria-current="page"] { color: var(--accent); }
.doc-cta { flex: none; }

/* ---------- breadcrumbs ---------- */
.doc-crumbs { max-width: 1080px; margin: 0 auto; padding: 14px 24px 0; }
.doc-crumbs ol { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 11px; }
.doc-crumbs a { color: var(--text-dim); }
.doc-crumbs a:hover { color: var(--accent); text-decoration: underline; }
.doc-crumbs li[aria-current] { color: var(--text-mute); }
.doc-crumbs__sep { color: var(--text-mute); }

/* ---------- article ---------- */
.doc-main { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 26px 24px 64px; }
.doc-article { max-width: 760px; }

.doc-article h1 {
  font-size: 33px; font-weight: 800; line-height: 1.18; letter-spacing: -.7px;
  margin-bottom: 16px;
}
.doc-lead { font-size: 15px; color: var(--text-dim); line-height: 1.7; }
.doc-meta { font-size: 11px; color: var(--text-mute); margin-top: 12px; }

.doc-stat {
  margin-top: 18px; padding: 11px 15px; border-radius: var(--r-md);
  background: var(--panel); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-dim);
}
.doc-stat b { color: var(--accent); font-size: 14px; }

.doc-section { margin-top: 40px; }
.doc-section h2 {
  font-size: 21px; font-weight: 700; letter-spacing: -.3px; line-height: 1.3;
  padding-bottom: 9px; border-bottom: 1px solid var(--line); margin-bottom: 16px;
}
.doc-section h3 { font-size: 14.5px; font-weight: 700; margin-top: 20px; margin-bottom: 6px; }
.doc-section p { font-size: 13.5px; color: var(--text-dim); margin-top: 10px; }
.doc-article a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.doc-article a:not(.btn):hover { text-decoration-thickness: 2px; }

.doc-scope, .doc-links { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.doc-scope li, .doc-links li {
  position: relative; padding-left: 20px; font-size: 13.5px; color: var(--text-dim);
}
.doc-scope li::before, .doc-links li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .65;
}
.doc-tip {
  margin-top: 16px; padding: 12px 15px; border-radius: var(--r-md);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  font-size: 12.5px;
}

.doc-cta-line { margin-top: 22px; }

/* ---------- card grids ---------- */
.doc-cards { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 14px; }
.doc-card {
  padding: 16px; border-radius: var(--r-lg);
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.doc-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-2px); }
.doc-card h3 { margin-top: 0; font-size: 14px; }
.doc-card p { font-size: 12.5px; margin-top: 7px; }
.doc-card__meta { color: var(--text-mute) !important; font-size: 11px !important; font-weight: 600; }

/* ---------- questions ---------- */
.doc-qlist { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; counter-reset: q; }
.doc-q {
  padding: 17px 19px; border-radius: var(--r-lg);
  background: var(--panel); border: 1px solid var(--line);
}
.doc-q__stem { margin: 0 0 12px; font-size: 13.5px; font-weight: 700; line-height: 1.55; }
.doc-q__stem::before {
  counter-increment: q; content: counter(q) ". ";
  color: var(--accent); font-weight: 800;
}
.doc-q__choices { display: flex; flex-direction: column; gap: 6px; }
.doc-q__choices li {
  padding: 8px 11px; border-radius: 7px; font-size: 12.5px; color: var(--text-dim);
  background: var(--panel-2); border: 1px solid transparent;
}
.doc-q__choices li b { color: var(--text-mute); margin-right: 4px; }
.doc-q__choices .is-key {
  color: var(--text);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border-color: color-mix(in srgb, var(--ok) 42%, transparent);
}
.doc-q__tag {
  float: right; font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ok); padding-top: 2px;
}
[data-theme="light"] .doc-q__tag { color: color-mix(in srgb, var(--ok) 72%, #000); }
.doc-q__why {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.65; color: var(--text-dim);
}
.doc-q__why b { color: var(--text); }

/* ---------- FAQ ---------- */
.doc-faq { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.doc-faq details {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel); overflow: hidden;
}
.doc-faq summary {
  cursor: pointer; padding: 13px 16px; list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.doc-faq summary::-webkit-details-marker { display: none; }
.doc-faq summary::after {
  content: "+"; margin-left: auto; color: var(--accent); font-size: 17px; font-weight: 700; line-height: 1;
}
.doc-faq details[open] summary::after { content: "\2212"; }
/* The heading has to stay a real h3 for the document outline, so it is the
   heading's own display that is neutralised rather than the element swapped. */
.doc-faq summary h3 { margin: 0; font-size: 13.5px; font-weight: 700; display: inline; }
.doc-faq details p { padding: 0 16px 15px; margin: 0; font-size: 13px; }
.doc-faq details[open] { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }

/* ---------- footer ---------- */
.doc-foot {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line); margin-top: 30px;
  background: var(--sidebar);
}
.doc-foot__cols {
  max-width: 1080px; margin: 0 auto; padding: 34px 24px 24px;
  display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.doc-foot h2 {
  font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 11px;
}
.doc-foot ul { display: flex; flex-direction: column; gap: 8px; }
.doc-foot a { color: var(--text-dim); font-size: 12.5px; }
.doc-foot a:hover { color: var(--accent); text-decoration: underline; }
.doc-foot__legal {
  max-width: 1080px; margin: 0 auto; padding: 0 24px 30px;
  font-size: 11px; color: var(--text-mute); line-height: 1.6;
}

/* ---------- narrow screens ---------- */
@media (max-width: 720px) {
  .doc-head { padding: 14px 16px; gap: 12px; }
  .doc-nav { order: 3; width: 100%; margin-left: 0; gap: 14px; }
  .doc-cta { margin-left: auto; }
  .doc-crumbs { padding: 12px 16px 0; }
  .doc-main { padding: 20px 16px 48px; }
  .doc-article h1 { font-size: 25px; }
  .doc-lead { font-size: 14px; }
  .doc-section { margin-top: 32px; }
  .doc-section h2 { font-size: 18px; }
  .doc-q { padding: 14px 15px; }
  .doc-foot__cols { padding: 26px 16px 20px; }
  .doc-foot__legal { padding: 0 16px 26px; }
}

/* ---------- touch targets ----------
   Navigation, breadcrumb and footer links are chrome, not prose: they are aimed
   at with a thumb, and at their type size the clickable box was 14–21px tall.
   Padding is added rather than font size increased, so the design is unchanged
   and only the hit area grows. Links inside body copy are left alone — they sit
   in a line of text, where padding would break the leading and where a reader
   is not thumbing for them anyway. */
@media (hover: none), (max-width: 720px) {
  .doc-nav a,
  .doc-foot a {
    display: inline-flex; align-items: center; min-height: 24px;
    padding-block: 3px;
  }
  .doc-crumbs a,
  .doc-crumbs li[aria-current] {
    display: inline-flex; align-items: center; min-height: 24px;
  }
  /* The list gets a little air back, since each row is now taller. */
  .doc-foot ul { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .doc-card { transition: none; }
  .doc-card:hover { transform: none; }
}