/* Arbitration Desk -- blog.css
 *
 * Shared stylesheet for the /blog/ section. Same visual language as the
 * homepage (Inter + JetBrains Mono, dark #05060a glass, purple/teal/cyan
 * accents, the same pre-paint light/dark theme mechanism) but a simpler,
 * lighter-weight cousin: no scrolly acts, no canvas/SVG charts, no rail --
 * just a fixed nav, a generous single-column reading measure, and a footer.
 * EN-only for v1, so there is no lang-en/lang-es pairing here and no
 * i18n.js dependency.
 */
:root{
  --bg:#05060a;
  --panel:rgba(255,255,255,.045);
  --panel-2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.10);
  --ink:#eef1f7;
  --mut:#9aa3b5;
  --dim:#6b7488;
  --purple:#7c6cff;
  --teal:#4dd6c1;
  --pink:#f0739b;
  --cyan:#00dcff;
  --radius:16px;
  --navh:78px;
  --ov-02:rgba(255,255,255,.02);
  --ov-03:rgba(255,255,255,.03);
  --ov-04:rgba(255,255,255,.04);
  --ov-06:rgba(255,255,255,.06);
  --ov-08:rgba(255,255,255,.08);
  --shadow-1:rgba(0,0,0,.6);
}
html[data-theme="light"]{
  --bg:#f7f8fb;
  --panel:#ffffff;
  --panel-2:#eef0f6;
  --line:rgba(15,23,42,.12);
  --ink:#161a22;
  --mut:#4d5568;
  --dim:#727b8e;
  --purple:#5b46e8;
  --teal:#0e8f7d;
  --pink:#c23764;
  --cyan:#0089ab;
  --ov-02:rgba(15,23,42,.02);
  --ov-03:rgba(15,23,42,.035);
  --ov-04:rgba(15,23,42,.05);
  --ov-06:rgba(15,23,42,.06);
  --ov-08:rgba(15,23,42,.09);
  --shadow-1:rgba(30,41,59,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* NAV -- same fixed/blur bar as the homepage, simplified: no lang toggle
   since blog pages are EN-only for v1. */
nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(18px,4vw,44px);
  backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, color-mix(in srgb, var(--bg) 78%, transparent), transparent);
  border-bottom:1px solid transparent;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;font-size:15px;color:var(--ink);text-decoration:none}
.brand .dot{width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,var(--purple),var(--cyan));box-shadow:0 0 16px rgba(124,108,255,.7)}
.navlinks{display:flex;gap:20px;align-items:center;font-size:14px}
.navlinks a{color:var(--mut);text-decoration:none;font-weight:500}
.navlinks a:hover{color:var(--ink)}
.navlinks a.signin{color:var(--ink);border:1px solid var(--line);padding:7px 14px;border-radius:10px}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;padding:0;width:32px;height:32px;border-radius:99px;border:1px solid var(--line);background:var(--ov-03);color:var(--mut);cursor:pointer;transition:.2s;font-size:14px;line-height:1;flex:none}
.theme-toggle:hover{color:var(--ink)}
.theme-toggle .ti-sun,.theme-toggle .ti-moon{display:none}
html[data-theme="dark"] .theme-toggle .ti-sun{display:inline-block}
html[data-theme="light"] .theme-toggle .ti-moon{display:inline-block}
@media (max-width:640px){
  :root{ --navh:100px; }
  nav{flex-wrap:wrap;row-gap:10px;padding:14px 16px}
  .navlinks{flex:1 1 100%;justify-content:space-between}
}

/* PAGE / ARTICLE LAYOUT -- article-first, generous reading measure, no
   scroll theatrics: everything is normal document flow. */
main{
  position:relative;z-index:1;max-width:720px;margin:0 auto;
  padding:calc(var(--navh) + 30px) clamp(20px,6vw,28px) 70px;
}
main.wide{max-width:920px}
.kicker{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--purple);margin:0 0 14px}
.crumb{font-size:13px;color:var(--dim);margin:0 0 18px}
.crumb a{color:var(--dim);text-decoration:none}
.crumb a:hover{color:var(--ink)}
article h1{font-size:clamp(28px,4.4vw,42px);line-height:1.12;font-weight:800;letter-spacing:-.6px;margin:0 0 14px}
article .dek{color:var(--mut);font-size:clamp(15.5px,1.6vw,18px);max-width:62ch;margin:0 0 30px}
article h2{font-size:clamp(20px,2.6vw,26px);font-weight:800;letter-spacing:-.3px;margin:44px 0 14px}
article h3{font-size:17.5px;font-weight:700;margin:28px 0 10px}
article p{font-size:16px;color:var(--ink);max-width:66ch;margin:0 0 16px}
article p.lead{font-size:17.5px;color:var(--ink)}
article ul,article ol{margin:0 0 18px;padding-left:22px;max-width:64ch}
article li{font-size:16px;margin:0 0 9px}
article li::marker{color:var(--dim)}
article a{color:var(--cyan);text-decoration:underline;text-decoration-color:var(--ov-08);text-underline-offset:2px}
article a:hover{text-decoration-color:var(--cyan)}
article strong{color:var(--ink)}
article blockquote{
  margin:22px 0;padding:4px 0 4px 18px;border-left:3px solid var(--teal);
  color:var(--mut);font-size:15.5px;max-width:62ch;
}
article .callout{
  margin:26px 0;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--ov-06),var(--ov-02));padding:18px 20px;
  max-width:66ch;
}
article .callout p{margin:0}
article .callout p+p{margin-top:8px}
article .callout .lbl{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);margin:0 0 8px;display:block}
.byline{display:flex;gap:10px;align-items:center;color:var(--dim);font-size:13px;margin:0 0 34px}
.byline .sep{width:3px;height:3px;border-radius:50%;background:var(--dim)}

/* TEMPLATE BLOCK -- a visually distinct fill-in-the-blank letter body */
.tpl{
  margin:22px 0 30px;border:1px dashed var(--line);border-radius:var(--radius);
  background:var(--panel);padding:24px 26px;max-width:66ch;
}
.tpl .tpl-lbl{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--pink);margin:0 0 14px;display:block}
.tpl pre{
  white-space:pre-wrap;font-family:'JetBrains Mono',monospace;font-size:13.5px;
  line-height:1.7;color:var(--ink);margin:0;
}
.tpl mark{background:rgba(124,108,255,.22);color:var(--ink);border-radius:3px;padding:0 3px;font-weight:600}

/* FAQ */
.faq{margin-top:16px}
.faq-item{border-top:1px solid var(--line);padding:18px 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item h3{margin:0 0 8px;font-size:16.5px}
.faq-item p{margin:0}

/* ARTICLE LIST (blog index) */
.postlist{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.postcard{
  display:block;text-decoration:none;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);padding:22px 24px;transition:border-color .2s, background .2s;
}
.postcard:hover{border-color:rgba(124,108,255,.4);background:var(--panel-2)}
.postcard h2{margin:0 0 8px;font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.2px}
.postcard p{margin:0;color:var(--mut);font-size:14.5px;max-width:60ch}
.postcard .tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--teal);margin:0 0 8px;display:block}

/* CTA / free-checker link block, reused on all three articles */
.cta{
  margin:34px 0;border:1px solid rgba(0,220,255,.28);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--ov-06),var(--ov-02));padding:22px 24px;max-width:66ch;
}
.cta p{margin:0 0 12px}
.cta a.btn{
  display:inline-flex;text-decoration:none;font-weight:700;font-size:14.5px;color:#05060a;
  padding:11px 20px;border-radius:11px;background:linear-gradient(120deg,var(--teal),var(--cyan));
  box-shadow:0 12px 30px -12px rgba(0,220,255,.6);
}

/* internal "related reading" links row */
.related{margin-top:44px;border-top:1px solid var(--line);padding-top:22px;max-width:66ch}
.related .lbl{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);margin:0 0 12px;display:block}
.related ul{list-style:none;margin:0;padding:0}
.related li{margin:0 0 8px}

/* disclaimer + footer, same wording family as the homepage footer */
.disclaim{margin-top:34px;font-size:12.5px;color:var(--dim);max-width:70ch;line-height:1.6;border-top:1px solid var(--line);padding-top:18px}
footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:30px clamp(20px,6vw,28px);max-width:720px;margin:0 auto;color:var(--dim);font-size:12.5px}
footer.wide{max-width:920px}
footer .fdisc{max-width:80ch;line-height:1.6}
footer .flinks{margin-top:14px;display:flex;gap:20px;flex-wrap:wrap}
footer .flinks a{color:var(--mut);text-decoration:none}
footer .flinks a:hover{color:var(--ink)}