/* Article reading layer.
   article.css lays the page out; this file is about how it reads — measure,
   rhythm, contrast and surface softness. Every colour goes through a palette
   token, so both themes move together. */

.prose{--ar-gap:clamp(20px,2.4vw,30px)}

/* -------------------------------------------------------------- typography */
.prose{font-size:16.5px;line-height:1.78;color:var(--text-dim)}
#articleBody{padding-inline:max(24px,calc((100% - 47rem) / 2))}
#articleBody>*{max-width:100%;margin-inline:0}
.prose>*{max-width:74ch;margin-inline:auto}
.prose>figure,.prose>.research-table-wrap,.prose>.code,.prose>pre,
.prose>.attack-flow,.prose>.related-intel,.prose>.mitigation-list,
.prose>.detection-tabs,.prose>.detection-rule{max-width:100%}

.prose h2,.prose h3,.prose h4{color:var(--text);letter-spacing:-.02em;text-wrap:balance;scroll-margin-top:88px}
.prose h2{margin:calc(var(--ar-gap) * 1.5) 0 12px;font-size:clamp(21px,2.2vw,27px);line-height:1.28}
.prose h3{margin:calc(var(--ar-gap) * 1.1) 0 10px;font-size:clamp(17.5px,1.7vw,20.5px);line-height:1.35}
.prose h4{margin:var(--ar-gap) 0 8px;font-size:16.5px}
.prose h2+p,.prose h3+p{margin-top:0}
.prose p{margin:0 0 var(--ar-gap)}
.prose p:last-child{margin-bottom:0}

/* The opening paragraph carries the article; give it a little more air. */
.prose>p:first-of-type{font-size:17.5px;line-height:1.72;color:var(--text)}

.prose a{color:var(--brand-strong);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2.5px;text-decoration-color:color-mix(in srgb,var(--brand) 42%,transparent)}
.prose a:hover{text-decoration-color:var(--brand)}
.prose strong{color:var(--text);font-weight:650}
.prose ul,.prose ol{margin:0 0 var(--ar-gap);padding-left:25px}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--brand)}
.prose hr{margin:calc(var(--ar-gap) * 1.4) 0;border:0;border-top:1px solid var(--border)}

.prose blockquote{
  margin:calc(var(--ar-gap) * 1.1) 0;padding:4px 0 4px 22px;
  border-left:3px solid var(--brand);
  font-size:17.5px;line-height:1.7;font-style:normal;color:var(--text);
}
.prose blockquote p:last-child{margin-bottom:0}

.prose img{border-radius:13px;box-shadow:var(--shadow)}
.prose figure{margin:calc(var(--ar-gap) * 1.1) 0}
.prose figcaption{margin-top:9px;font-size:12.5px;line-height:1.6;color:var(--text-faint);text-align:center}

.prose code:not(pre code){
  padding:2px 6px;border:1px solid var(--border);border-radius:6px;background:var(--soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;color:var(--text);
}

/* ---------------------------------------------------------------- contents */
.a-rail .a-toc{
  margin:0;padding:14px 4px 14px 0;
  border:0;border-left:2px solid var(--border);border-radius:0;background:transparent;
}
.a-toc-title{
  margin:0 0 10px 15px;font-size:10px;font-weight:750;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint);
}
.a-toc ol,.a-toc ul{margin:0;padding:0;list-style:none}
.a-toc li{margin:0}

/* The numbers came from a counter in article.css. They pushed long headings
   into a ragged hanging indent and were double-counted once this file added a
   second increment, so the rail drops them entirely: an active marker says
   where you are far better than an ordinal nobody reads. */
.a-toc a::before{content:none;counter-increment:none}
.a-toc li{counter-increment:none}

.a-toc a{
  position:relative;display:block;max-width:100%;
  padding:7px 10px 7px 15px;margin-left:-2px;
  border-left:2px solid transparent;
  font-size:12.5px;line-height:1.5;color:var(--text-faint);
  text-decoration:none;text-wrap:pretty;overflow-wrap:anywhere;
  transition:color .15s,border-color .15s;
}
.a-toc a:hover{color:var(--text);border-left-color:var(--border);text-decoration:none}
.a-toc a.is-current{color:var(--brand-strong);border-left-color:var(--brand);font-weight:600}
.a-toc .toc-sub a{padding-left:26px;font-size:12px;opacity:.86}

/* Long rails scroll on their own rather than pushing the feed off-screen. */
.a-rail .a-toc{max-height:min(52vh,460px);overflow-y:auto;scrollbar-width:thin}

/* --------------------------------------------------------- source cards */
/* Editor-written reference lists.
   Articles carry their own "Sources reviewed" section inside the body HTML, so
   there is no class to hook. An ordered list whose every item is nothing but a
   link is a reference list and nothing else, which :has() can match exactly. */
.prose ol:has(> li > a:only-child){
  max-width:100%;margin:14px 0 var(--ar-gap);padding:18px 20px;
  border:1px solid var(--border);border-radius:14px;background:var(--soft);
  list-style:none;counter-reset:refs;
}
.prose ol:has(> li > a:only-child) > li{
  margin:0;padding:0;counter-increment:refs;
}
.prose ol:has(> li > a:only-child) > li + li{margin-top:6px}
.prose ol:has(> li > a:only-child) > li > a{
  display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:11px 13px;border:1px solid transparent;border-radius:10px;
  background:var(--panel);
  font-size:13.5px;font-weight:600;line-height:1.45;color:var(--text);
  text-decoration:none;overflow-wrap:anywhere;
  transition:border-color .15s ease,transform .15s ease;
}
.prose ol:has(> li > a:only-child) > li > a::before{
  content:counter(refs);
  display:grid;place-items:center;width:24px;height:24px;border-radius:7px;
  background:var(--brand-soft);color:var(--brand-strong);
  font-size:11px;font-weight:750;font-variant-numeric:tabular-nums;
}
.prose ol:has(> li > a:only-child) > li > a::after{
  content:"↗";color:var(--text-faint);font-size:12px;font-weight:400;
  transition:color .15s ease,transform .15s ease;
}
.prose ol:has(> li > a:only-child) > li > a:hover{
  border-color:var(--brand);transform:translateX(2px);text-decoration:none;
}
.prose ol:has(> li > a:only-child) > li > a:hover::after{
  color:var(--brand-strong);transform:translate(2px,-2px);
}

.source-block{
  padding:20px;border:1px solid var(--border);border-radius:14px;background:var(--soft);
}
.source-note{
  margin:14px 0 0;padding-top:13px;border-top:1px solid var(--border);
  font-size:12px;line-height:1.6;color:var(--text-faint);
}
.source-list{margin:0;padding:0;list-style:none;display:grid;gap:7px;max-width:100%}
.source-list li{margin:0}
.source-list a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;align-items:center;
  padding:13px 15px;border:1px solid var(--border);border-radius:11px;
  background:var(--panel);text-decoration:none;
  transition:border-color .15s,transform .15s,background .15s;
}
.source-list a:hover{border-color:var(--brand);background:var(--soft);transform:translateX(2px)}
.source-index{
  display:grid;place-items:center;width:24px;height:24px;border-radius:7px;
  background:var(--brand-soft);color:var(--brand-strong);
  font-size:11px;font-weight:750;font-variant-numeric:tabular-nums;
}
.source-copy{min-width:0}
.source-copy strong{display:block;font-size:13.5px;font-weight:600;line-height:1.45;color:var(--text);overflow-wrap:anywhere}
.source-copy small{
  display:block;margin-top:3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;color:var(--text-faint);
}
.source-go{color:var(--text-faint);font-size:13px;transition:color .15s,transform .15s}
.source-list a:hover .source-go{color:var(--brand-strong);transform:translate(2px,-2px)}

/* ------------------------------------------------------- research modules */
.research-module{
  margin-top:24px;padding:20px 22px;border:1px solid var(--border);
  border-radius:14px;background:var(--soft);
}
.research-module h2{
  margin:0 0 14px;font-size:11px;font-weight:750;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand-strong);
}
.research-module ul{margin:0;padding-left:20px}
.research-module li{margin-bottom:9px;font-size:14.5px;line-height:1.7;color:var(--text-dim)}
.research-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;margin:0;background:var(--border);border:1px solid var(--border);border-radius:11px;overflow:hidden}
.research-facts div{padding:13px 15px;background:var(--panel)}
.research-facts dt{font-size:10.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.research-facts dd{margin:6px 0 0;font-size:14px;font-weight:600;color:var(--text);overflow-wrap:anywhere}

.research-section{margin-top:18px}
.research-section>h2{
  margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--border);
  font-size:clamp(19px,2vw,23px);letter-spacing:-.02em;color:var(--text);
}

.research-table-wrap{border:1px solid var(--border);border-radius:12px;overflow-x:auto}
.research-table{width:100%;border-collapse:collapse;min-width:460px}
.research-table th{
  padding:11px 15px;background:var(--soft);border-bottom:1px solid var(--border);
  font-size:10.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
  text-align:left;color:var(--text-faint);white-space:nowrap;
}
.research-table td{padding:11px 15px;border-bottom:1px solid var(--border);font-size:13.5px;line-height:1.6;color:var(--text-dim);overflow-wrap:anywhere}
.research-table tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------- attack flow */
.attack-flow{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.attack-step{
  flex:1 1 190px;padding:16px 17px;border:1px solid var(--border);
  border-radius:12px;background:var(--panel);box-shadow:var(--shadow);
}
.attack-step h3{margin:0 0 7px;font-size:14px;letter-spacing:-.01em;color:var(--text)}
.attack-step p{margin:0;font-size:12.5px;line-height:1.65;color:var(--text-faint)}
.attack-arrow{display:grid;place-items:center;color:var(--brand);font-size:17px;flex:0 0 auto}

/* --------------------------------------------------------------- detection */
.detection-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.detection-tabs button{
  padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:var(--panel);
  font-size:12.5px;font-weight:650;color:var(--text-dim);cursor:pointer;transition:.16s;
}
.detection-tabs button:hover{border-color:var(--brand);color:var(--brand-strong)}
.detection-tabs button.active{background:var(--brand);border-color:var(--brand);color:#fff}
.detection-rule{display:none}
.detection-rule.active{display:block}
.detection-rule pre{
  padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.7;
  color:var(--text);overflow-x:auto;
}
.rule-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.rule-actions button{
  padding:7px 13px;border:1px solid var(--border);border-radius:8px;background:var(--soft);
  font-size:12px;font-weight:650;color:var(--text-dim);cursor:pointer;transition:.16s;
}
.rule-actions button:hover{border-color:var(--brand);color:var(--brand-strong)}

.mitigation-list{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.mitigation-list li{
  position:relative;padding:12px 15px 12px 40px;border:1px solid var(--border);
  border-radius:11px;background:var(--panel);font-size:14px;line-height:1.65;color:var(--text-dim);
}
.mitigation-list li:before{
  content:"✓";position:absolute;left:14px;top:12px;display:grid;place-items:center;
  width:18px;height:18px;border-radius:50%;background:var(--brand-soft);
  color:var(--brand-strong);font-size:10px;font-weight:800;
}

.related-intel{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.related-intel a{
  display:grid;gap:5px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;
  background:var(--panel);color:var(--text);font-size:13.5px;font-weight:600;line-height:1.5;
  transition:border-color .16s,transform .16s;
}
.related-intel a:hover{border-color:var(--brand);transform:translateY(-2px)}

/* ------------------------------------------------------------------ footer */
.nav-btn{
  display:inline-flex;align-items:center;gap:8px;padding:11px 15px;
  border:1px solid var(--border);border-radius:11px;background:var(--panel);
  font-size:13.5px;color:var(--text-dim);transition:.16s;
}
.nav-btn:hover{border-color:var(--brand);background:var(--soft);color:var(--text)}

.reading-progress{background:var(--brand)}

/* -------------------------------------------------------------- responsive */
@media(max-width:760px){
  .prose{font-size:16px;line-height:1.75}
  .prose>p:first-of-type{font-size:16.5px}
  .a-byline{flex-wrap:wrap}
  .attack-flow{flex-direction:column}
  .attack-arrow{transform:rotate(90deg)}
}