/* ============================================================
   ClaudeArchitect — Blueprint article styles
   Re-skins the 26 Claude Code guides. Class names match the
   existing markup; no content or URLs are changed.
   ============================================================ */

/* ---------- Article shell ---------- */
.article{max-width:var(--wrap);margin:0 auto;padding:0 24px 60px;
  display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:56px;align-items:start}
@media(max-width:960px){.article{grid-template-columns:minmax(0,1fr);gap:0}}

/* ---------- Header ---------- */
/* main wraps the article — kill any inherited spacing so the gap is controlled here */
main{display:block;padding:0;margin:0}
.article__header{padding:34px 0 24px;border-bottom:1px solid var(--line);margin-bottom:30px}
.article__breadcrumb,.article__back{font-family:var(--mono);font-size:12px;color:var(--ink-mute);
  display:inline-block;margin:0 0 20px}
.article__back:hover,.article__breadcrumb:hover{color:var(--accent);text-decoration:none}
.article__category,.article__badge{display:inline-block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  border:1px solid rgba(35,92,158,.28);background:rgba(35,92,158,.06);
  padding:3px 9px;border-radius:2px;margin:0 8px 14px 0;vertical-align:middle}
.article__title,.article__header h1{font-family:var(--serif);font-weight:600;letter-spacing:-.022em;
  line-height:1.1;font-size:clamp(32px,4.8vw,50px);margin:0 0 16px;color:var(--ink);max-width:22ch}
.article__subtitle{font-size:20px;line-height:1.55;color:var(--ink-soft);max-width:62ch;margin:0 0 22px}
.article__meta,.article__info{display:flex;gap:12px 26px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:12.5px;color:var(--ink-mute);margin:0}
.article__meta{padding-top:16px;border-top:1px solid var(--line-soft)}
.article__reading-time{display:inline-flex;align-items:center;gap:7px}
.article__reading-time::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- Table of contents ---------- */
/* Explicit placement — the TOC sits BEFORE the content in the DOM, so we pin
   each region to its cell rather than relying on auto-flow or `order`. */
.article__header{grid-column:1/-1;grid-row:1}
.toc,.article__toc{grid-column:2;grid-row:2;position:sticky;top:86px;font-size:14px;align-self:start}
.article__content{grid-column:1;grid-row:2}
.article-nav,.related,.article__footer{grid-column:1/-1}
@media(max-width:960px){
  .article__header,.toc,.article__toc,.article__content,
  .article-nav,.related,.article__footer{grid-column:auto;grid-row:auto}
  .toc,.article__toc{position:static;margin:0 0 34px;border:1px solid var(--line);
    border-radius:var(--radius);background:var(--paper-2);padding:20px 22px}
}
.toc__title{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);margin:0 0 14px;font-weight:500}
.toc__list{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc__list li{counter-increment:toc;margin:0 0 2px}
.toc__list a{display:block;padding:6px 0 6px 28px;position:relative;color:var(--ink-soft);
  border-left:2px solid var(--line-soft);line-height:1.4}
.toc__list a::before{content:counter(toc,decimal-leading-zero);position:absolute;left:8px;top:7px;
  font-family:var(--mono);font-size:10.5px;color:var(--ink-mute)}
.toc__list a:hover,.toc__list a.active{color:var(--accent);border-left-color:var(--accent);text-decoration:none}

/* ---------- Body copy ---------- */
.article__content{min-width:0;max-width:74ch;font-size:18px;line-height:1.72;color:var(--ink-soft)}
.article__content > *:first-child{margin-top:0}
.article__content h2{font-family:var(--serif);font-weight:600;font-size:clamp(25px,3.2vw,32px);
  letter-spacing:-.015em;line-height:1.2;color:var(--ink);margin:48px 0 14px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.article__content h3{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.01em;
  color:var(--ink);margin:34px 0 10px}
.article__content h4{font-family:var(--sans);font-weight:600;font-size:17px;color:var(--ink);margin:26px 0 8px}
.article__content p{margin:0 0 20px}
.article__content strong{color:var(--ink);font-weight:600}
.article__content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(35,92,158,.32)}
.article__content a:hover{text-decoration-color:var(--accent)}
.article__content ul,.article__content ol{margin:0 0 22px;padding-left:0;list-style:none}
.article__content ol{counter-reset:li}
.article__content li{position:relative;padding-left:28px;margin:0 0 11px}
.article__content ul > li::before{content:"";position:absolute;left:5px;top:11px;width:7px;height:7px;
  border:1.5px solid var(--accent);transform:rotate(45deg)}
.article__content ol > li{counter-increment:li}
.article__content ol > li::before{content:counter(li);position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:500}
.article__content blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--accent);
  color:var(--ink);font-family:var(--serif);font-size:20px;line-height:1.55}
.article__content blockquote p:last-child{margin-bottom:0}
.article__divider{border:0;border-top:1px solid var(--line);margin:48px 0}
.article__content img{border:1px solid var(--line);border-radius:var(--radius);margin:26px 0}

/* Inline code */
.article__content code{font-family:var(--mono);font-size:.86em;background:var(--paper);
  border:1px solid var(--line-soft);padding:1.5px 5px;border-radius:3px;color:var(--accent-deep);
  word-break:break-word}

/* ---------- Code blocks ---------- */
.code-block{margin:26px 0;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper-2);overflow:hidden;box-shadow:var(--lift)}
.code-block__header{display:flex;align-items:center;gap:10px;padding:10px 16px;
  background:var(--paper);border-bottom:1px solid var(--line)}
.code-block__label,.code-block__language{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute)}
.code-block__language{margin-left:auto;color:var(--accent)}
/* Code surfaces are always dark ink with light text — one consistent rule so
   nested .code-block > pre can never end up navy-on-navy. */
.article__content pre,
.code-block pre{margin:0;padding:18px 20px;overflow-x:auto;background:#0F2745;border:0;border-radius:0}
.article__content > pre{margin:26px 0;border-radius:var(--radius);border:1px solid #1B3A5F}
.article__content pre code,
.code-block pre code{background:transparent;border:0;padding:0;color:#DCE6F1;font-size:14px;
  line-height:1.7;display:block;word-break:normal;white-space:pre}
/* Tokens inside dark code keep readable contrast */
.article__content pre .token,.code-block pre .token{color:inherit}
.article__content pre strong,.code-block pre strong{color:#FFFFFF;font-weight:600}

/* ---------- Callouts ---------- */
.callout{display:flex;gap:14px;margin:28px 0;padding:18px 20px;border:1px solid var(--line);
  border-left-width:3px;border-radius:var(--radius);background:var(--paper-2)}
.callout__icon{flex:0 0 auto;font-size:15px;line-height:1.5;color:var(--accent)}
.callout__content{flex:1;min-width:0;font-size:16px;color:var(--ink-soft)}
.callout__content > *:first-child{margin-top:0}
.callout__content > *:last-child{margin-bottom:0}
.callout__content strong{color:var(--ink)}
.callout--info{border-left-color:var(--accent)}
.callout--info .callout__icon{color:var(--accent)}
.callout--tip{border-left-color:var(--ok);background:var(--ok-bg)}
.callout--tip .callout__icon{color:var(--ok)}
.callout--warning{border-left-color:var(--flag);background:var(--flag-bg);border-color:#E4CBAE}
.callout--warning .callout__icon{color:var(--flag)}

/* ---------- Tables ---------- */
.article__content table,.param-table{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:table}
.article__content th,.param-table th{text-align:left;padding:12px 16px;background:var(--paper);
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute);font-weight:500}
.article__content td,.param-table td{padding:12px 16px;border-bottom:1px solid var(--line-soft);
  vertical-align:top;color:var(--ink-soft)}
.article__content tr:last-child td,.param-table tr:last-child td{border-bottom:0}
.param-name{font-family:var(--mono);font-size:13px;color:var(--accent-deep);white-space:nowrap}
.param-required{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--flag);background:var(--flag-bg);padding:2px 7px;border-radius:2px}
.param-optional{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-mute);background:var(--paper);border:1px solid var(--line-soft);padding:2px 7px;border-radius:2px}

/* ---------- Quick reference ---------- */
.quick-ref{margin:26px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);overflow:hidden}
.quick-ref__item{display:flex;gap:18px;padding:13px 18px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.quick-ref__item:last-child{border-bottom:0}
.quick-ref__name{font-family:var(--mono);font-size:13.5px;color:var(--accent-deep);flex:0 0 210px}
.quick-ref__purpose{flex:1;min-width:200px;font-size:15px;color:var(--ink-soft)}
@media(max-width:560px){.quick-ref__name{flex:1 1 100%}}

/* ---------- Status flow ---------- */
.status-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:26px 0;padding:18px 20px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2)}
.status-flow__status{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:2px;border:1px solid var(--line);color:var(--ink-mute);background:var(--paper)}
.status-flow__status--pending{color:var(--ink-mute)}
.status-flow__status--in-progress{color:var(--flag);background:var(--flag-bg);border-color:#E4CBAE}
.status-flow__status--completed{color:var(--ok);background:var(--ok-bg);border-color:#C3DBCF}
.status-flow__arrow{color:var(--line);font-family:var(--mono)}

/* ---------- In-article CTA ---------- */
.cta-box,.article__cta{position:relative;margin:44px 0;padding:32px 34px;border:1px solid var(--accent);
  border-radius:var(--radius);background:var(--paper-2);box-shadow:var(--lift);overflow:hidden}
.cta-box::before,.article__cta::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}
.cta-box h2,.cta-box h3,.article__cta h2,.article__cta h3{font-family:var(--serif);font-weight:600;
  font-size:23px;margin:0 0 10px;color:var(--ink);border:0;padding:0}
.cta-box p,.article__cta p{color:var(--ink-soft);margin:0 0 20px;font-size:16px}
.cta-box__button,.article__cta-button{display:inline-block;font-family:var(--sans);font-weight:500;font-size:15px;
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:var(--radius);border:1px solid var(--ink);transition:.15s}
.cta-box__button:hover,.article__cta-button:hover{background:var(--accent-deep);border-color:var(--accent-deep);text-decoration:none}

/* ---------- Prev / next ---------- */
.article-nav{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:52px 0 0;
  padding-top:34px;border-top:1px solid var(--line)}
@media(max-width:640px){.article-nav{grid-template-columns:1fr}}
.article-nav__prev,.article-nav__next{min-width:0}
.article-nav__next{text-align:right}
.article-nav__label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);margin:0 0 8px}
.article-nav__link{display:block;font-family:var(--serif);font-weight:600;font-size:18px;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);padding:18px 20px;
  transition:.16s;box-shadow:var(--lift)}
.article-nav__link:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;
  box-shadow:var(--lift-hi);transform:translateY(-2px)}

/* ---------- Article footer ---------- */
.article__footer{grid-column:1/-1;margin-top:44px}

@media(max-width:640px){
  .article{padding:0 18px 48px}
  .article__content{font-size:17px}
  .cta-box,.article__cta{padding:24px 22px}
}

/* ---------- Related / cross-links (AEO hub-and-spoke) ---------- */
.related{grid-column:1/-1;margin:44px 0 0;padding:24px 26px;border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--radius);background:var(--paper-2)}
.related__title{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px;font-weight:500;border:0;padding:0}
.related__list{list-style:none;margin:0;padding:0}
.related__list li{position:relative;padding-left:24px;margin:0 0 11px;font-size:15.5px;color:var(--ink-soft);line-height:1.6}
.related__list li:last-child{margin-bottom:0}
.related__list li::before{content:"";position:absolute;left:4px;top:9px;width:7px;height:7px;
  border:1.5px solid var(--accent);transform:rotate(45deg)}
.related__list a{font-weight:500;color:var(--accent)}

/* ---------- In-article CTA (directory) ---------- */
.cta-box__eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px}
.cta-box__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cta-box__button{color:#fff !important}
.cta-box__alt{font-size:14.5px;color:var(--accent);text-decoration:none}
.cta-box__alt:hover{text-decoration:underline;text-underline-offset:2px}