/* Shared styles for guides and info pages */
:root{
  --paper:#E8F0EC; --ink:#17242F; --muted:#55636E; --ticket:#FFD44A; --ticket-edge:#E8B820;
  --cobalt:#2F4FD0; --line:#C9D6D0; --white:#FFFFFF; --green:#1F7A4D; --red:#B3362B;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121C22; --ink:#E6EEF0; --muted:#9AAAB4; --line:#2A3A43; --white:#1A262D; --cobalt:#8DA2FF;
    --green:#5CC28F; --red:#F07B70;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font:18px/1.7 "Instrument Sans",system-ui,sans-serif}
a{color:var(--cobalt)}
a:focus-visible,button:focus-visible{outline:3px solid var(--cobalt); outline-offset:2px}
.wrap{max-width:760px; margin:0 auto; padding:0 16px}

/* header */
header.site{padding:20px 0}
header.site .wrap{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.brand{font:800 20px/1 "Bricolage Grotesque",sans-serif; text-decoration:none; color:var(--ink)}
header nav a{margin-left:18px; color:var(--muted); text-decoration:none; font-size:15px}
header nav a:first-child{margin-left:0}
header nav a:hover,header nav a[aria-current]{color:var(--ink)}

/* article */
.crumbs{font-size:14px; color:var(--muted); margin:18px 0 10px}
.crumbs a{color:var(--muted)}
h1{font:800 clamp(34px,6.5vw,52px)/1.04 "Bricolage Grotesque",sans-serif; letter-spacing:-0.02em; margin:0 0 14px}
.byline{font-size:14px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 18px; margin:0 0 28px}
.lede{font-size:20px; line-height:1.6}
article h2{font:800 28px/1.15 "Bricolage Grotesque",sans-serif; letter-spacing:-0.01em; margin:44px 0 12px}
article h3{font:600 19px/1.35 "Instrument Sans",sans-serif; margin:28px 0 6px}
article p,article li{max-width:68ch}
article ul,article ol{padding-left:22px}
article li{margin:6px 0}
code{font:600 15px "JetBrains Mono",monospace; background:var(--white); border:1px solid var(--line); border-radius:6px; padding:1px 6px}

/* prompt boxes */
.prompt{
  position:relative; margin:16px 0; padding:30px 18px 16px; border-radius:12px;
  background:var(--white); border:1.5px solid var(--line); font-size:16px; line-height:1.6;
}
.prompt.good{border-color:var(--green)}
.prompt.bad{border-color:var(--red); border-style:dashed}
.prompt-tag{position:absolute; top:8px; left:18px; font-size:12px; font-weight:600; color:var(--muted)}
.prompt.good .prompt-tag{color:var(--green)}
.prompt.bad .prompt-tag{color:var(--red)}
.prompt .copy-prompt{
  position:absolute; top:6px; right:8px; font:600 12px "Instrument Sans",sans-serif; cursor:pointer;
  background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:8px; padding:3px 9px;
}
.prompt .copy-prompt:hover{color:var(--ink)}

/* tables */
.table-wrap{overflow-x:auto; margin:16px 0}
table{border-collapse:collapse; width:100%; font-size:16px; background:var(--white); border-radius:12px; overflow:hidden}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-weight:600}
tr:last-child td{border-bottom:0}

/* code callout */
.callout{
  margin:48px 0 12px; padding:22px 24px; border-radius:14px; background:var(--ticket); color:#17242F;
  box-shadow:0 2px 0 var(--ticket-edge);
}
.callout h2{margin:0 0 6px; font:800 24px/1.15 "Bricolage Grotesque",sans-serif}
.callout p{margin:0 0 14px}
.callout a.btn{display:inline-block; background:#17242F; color:var(--ticket); text-decoration:none; font-weight:600; padding:11px 18px; border-radius:10px}

/* related + guide lists */
.related{margin:40px 0}
.related h2{font:800 24px/1.2 "Bricolage Grotesque",sans-serif; margin:0 0 12px}
.guide-list{list-style:none; padding:0; margin:0}
.guide-list li{border-top:1px solid var(--line)}
.guide-list li:last-child{border-bottom:1px solid var(--line)}
.guide-list a{display:block; padding:16px 0; text-decoration:none; color:var(--ink)}
.guide-list a:hover strong{text-decoration:underline}
.guide-list strong{display:block; font-size:19px; line-height:1.3}
.guide-list span{display:block; color:var(--muted); font-size:15px; margin-top:4px}
.cat{font:800 22px/1.2 "Bricolage Grotesque",sans-serif; margin:40px 0 8px}

/* ads */
.ad{margin:36px 0; min-height:100px; text-align:center}
.ad .placeholder{border:1.5px dashed var(--line); border-radius:10px; padding:28px 12px; color:var(--muted); font-size:13px}
.ad-tag{font-size:11px; color:var(--muted); margin-bottom:4px}

/* footer */
footer{padding:36px 0 60px; color:var(--muted); font-size:14px; border-top:1px solid var(--line); margin-top:48px}
footer p{margin:0 0 10px}
footer nav a{color:var(--muted); margin-right:16px}

/* FAQ + sources */
details.faq{border-bottom:1px solid var(--line); padding:12px 0}
details.faq summary{cursor:pointer; font-weight:600}
details.faq p{margin:8px 0 0; color:var(--muted)}
ul.sources{font-size:15px; color:var(--muted)}