/* ==========================================================================
   aw-article.css — blog article prose + every legacy article component,
   restyled into the AI Workshop design language (Blog-Post.src.html).
   Loaded only on articles: $EXTRA_CSS = ['aw-article.css'] (see head.php).

   Layout, header, TOC, author row and related cards live in aw.css (§15).
   This file styles what sits INSIDE <article class="aw-prose">:
     1  prose base (type, headings, lists, links, code, quotes, rules)
     2  tables (bare <table>, .comparison-table, .risk-table)
     3  callouts (.highlight-box, .callout, .tip-box, .savings)
     4  stat tiles (.stat-grid/.stat-row/.stats-strip/.stat-strip/.stats-grid …)
     5  chart figures (.chart-container, .chart-wrap, .svg-wrapper)
     6  closing CTA (.cta-section, .cta-box → dark CTA card)
     7  card grids (tool/model/provider/news/use-case/partner/quote/step/
        pattern/comparison/trigger/plan/workforce/feature cards)
     8  row lists (factor, use-case, strength, workforce, timeline, checklist)
     9  badges and tags (all colour families)
    10  code blocks + syntax spans
    11  small screens, no-JS, print
   Specificity plan: element defaults use .aw-prose :where(…) (0,1,0) so every
   component rule (.aw-prose .x, 0,2,0) and the aw.css chrome win over them.
   Legacy class clashes (map-blog §5.2) are scoped by parent: .num (stat vs
   heading number), .model-card (digest card vs Claude tier), .step-number
   (circle vs label), .badge (5 colour sets), .tag vs .tag-open/.tag-prop,
   .label/.comment/.string/.key/.value/.keyword (code spans only).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Prose base
   -------------------------------------------------------------------------- */
.aw-prose{
  --text-muted:var(--muted);          /* 5 legacy inline style="color:var(--text-muted)" */
  --mark:var(--amber);
  font-size:18px;line-height:1.7;color:var(--ink-body);overflow-wrap:break-word;
}
.aw-prose > :first-child{margin-top:0}
.aw-prose :where(p){margin:0 0 22px;text-wrap:pretty}
.aw-prose :where(h2,h3,h4,h5,h6){color:var(--ink);text-wrap:balance}
.aw-prose :where(h2){font-family:var(--f-display);font-weight:700;font-size:clamp(26px,3vw,34px);line-height:1.15;letter-spacing:-.025em;margin:56px 0 18px;scroll-margin-top:96px}
.aw-prose :where(h3){font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2.2vw,23px);line-height:1.25;letter-spacing:-.02em;margin:40px 0 12px;scroll-margin-top:96px}
.aw-prose :where(h4,h5,h6){font-family:var(--f-display);font-weight:700;font-size:18px;line-height:1.3;letter-spacing:-.015em;margin:30px 0 8px}
/* a heading's next sibling starts right under it (beats component margins) */
.aw-prose.aw-prose :is(h2,h3,h4) + *{margin-top:0}

/* Lead paragraph (first body element) */
.aw-prose .article-lead,.aw-prose .lead{margin:0 0 28px;font-size:clamp(18px,1.9vw,20px);line-height:1.6;color:var(--ink);text-wrap:pretty}

/* Lists */
.aw-prose :where(ul,ol){margin:0 0 24px;padding-left:24px}
.aw-prose :where(li){padding-left:2px}
.aw-prose :where(li + li){margin-top:10px}
.aw-prose :where(li > ul,li > ol){margin:10px 0 0}
.aw-prose :where(ul,ol) > li::marker{color:var(--amber-ink)}
.aw-prose :where(ol) > li::marker{font-weight:600;font-variant-numeric:tabular-nums}

/* Inline */
.aw-prose :where(strong,b){font-weight:700;color:var(--ink)}
.aw-prose :where(a:not([class])){color:var(--amber-ink);text-decoration:underline;text-decoration-color:rgba(180,83,9,.4);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s ease,text-decoration-color .2s ease}
.aw-prose :where(a:not([class])):hover{color:var(--amber-deep);text-decoration-color:currentColor}
.aw-prose :where(code){font-family:var(--f-mono);font-size:.86em;padding:.12em .38em;border-radius:6px;background:var(--paper-2);color:var(--ink);overflow-wrap:anywhere}
.aw-prose :where(sup,sub){line-height:0}
.aw-prose :where(img){max-width:100%;height:auto;border-radius:var(--r-sm)}
.aw-prose :where(hr){border:0;border-top:1px solid var(--line);margin:48px 0}
.aw-prose :where(blockquote){margin:32px 0;padding:4px 0 4px 22px;border-left:3px solid var(--amber);font-size:19px;line-height:1.6;color:var(--ink)}
.aw-prose :where(blockquote) > :last-child{margin-bottom:0}
.aw-prose :where(section){margin:0}
.aw-prose :where(figure){margin:32px 0}

/* Numbered headings ("<h2><span class="num">1.</span> …", 5-processes posts) */
.aw-prose :is(h2,h3,h4) .num{color:var(--amber);margin-right:.3em;font-variant-numeric:tabular-nums}

/* Section label + title (adoption / Glasswing posts) */
.aw-prose .section-label{display:block;margin:56px 0 10px;font-family:var(--f-mono);font-size:12px;font-weight:500;line-height:1.35;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-ink)}
.aw-prose :is(div,h2).section-title{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,3vw,34px);line-height:1.15;letter-spacing:-.025em;color:var(--ink);margin:56px 0 18px;scroll-margin-top:96px;text-wrap:balance}
.aw-prose.aw-prose .section-label + .section-title{margin-top:0}
.aw-prose section:first-child > .section-label:first-child{margin-top:0}
.aw-prose .section-body > :last-child{margin-bottom:0}

/* Shared block rhythm for components */
.aw-prose :is(.highlight-box,.callout,.tip-box,.chart-container,.chart-wrap,.svg-wrapper,
  .stat-grid,.stat-row,.stats-strip,.stat-strip,.stats-grid,.workforce-grid,
  .tool-grid,.model-grid,.provider-grid,.pattern-grid,.comparison-grid,.trigger-grid,.plan-grid,
  .partner-grid,.steps-grid,.step-grid,.feature-grid,.sector-grid,.news-grid,.quote-grid,.quotes-grid,.use-case-list,
  .factor-list,.usecase-list,.strength-list,.workforce-list,.timeline,.code-block,pre,.aw-table-wrap){margin:32px 0}
.aw-prose > :is(div,ul,ol,figure,table,pre):last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   2. Tables — design table: rounded white wrapper (aw.js adds .aw-table-wrap),
      ink header row with mono uppercase labels, hairline rows
   -------------------------------------------------------------------------- */
.aw-prose :where(table){width:100%;border-collapse:collapse;border-spacing:0;font-size:14.5px;line-height:1.5;margin:32px 0}
.aw-prose .aw-table-wrap > table{margin:0}
.aw-prose table:has(tr > :nth-child(3)){min-width:520px}
.aw-prose table:has(tr > :nth-child(4)){min-width:600px}
.aw-prose table:has(tr > :nth-child(6)){min-width:720px}
.aw-prose :where(thead tr){background:var(--ink);color:var(--on-night)}
.aw-prose :where(th){padding:14px 18px;background:var(--ink);color:var(--on-night);font-family:var(--f-mono);font-size:11.5px;font-weight:500;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;text-align:left;vertical-align:bottom;border:0}
.aw-prose :where(td){padding:14px 18px;color:var(--muted);vertical-align:top;text-align:left;border:0;border-top:1px solid var(--line)}
.aw-prose :where(td:first-child){font-weight:700;color:var(--ink)}
.aw-prose :where(td) :where(strong,b){color:var(--ink)}
.aw-prose :where(tbody tr:first-child td){border-top:0}
.aw-prose :where(td) > :last-child{margin-bottom:0}
.aw-prose .aw-table-wrap.is-scrollable{background:linear-gradient(90deg,var(--white) 30%,rgba(255,255,255,0)) left/40px 100% no-repeat local,
  linear-gradient(270deg,var(--white) 30%,rgba(255,255,255,0)) right/40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(18,20,26,.12),transparent) left/12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(18,20,26,.12),transparent) right/12px 100% no-repeat scroll,var(--white)}

/* --------------------------------------------------------------------------
   3. Callouts — amber-tint rounded box (design: .aw-callout)
   -------------------------------------------------------------------------- */
.aw-prose :is(.highlight-box,.callout,.tip-box,.savings){background:var(--amber-tint);border:0;border-radius:18px;padding:22px 26px;font-size:17px;line-height:1.65;color:var(--ink)}
.aw-prose .savings{margin:16px 0 26px;padding:16px 22px;font-size:16px}
.aw-prose :is(.highlight-box,.callout,.tip-box,.savings) :where(p){margin:0 0 12px}
.aw-prose :is(.highlight-box,.callout,.tip-box,.savings) > :last-child{margin-bottom:0}
.aw-prose :is(.highlight-box,.callout,.tip-box,.savings) :where(strong,b){color:var(--ink)}
.aw-prose :is(.highlight-box,.callout,.tip-box,.savings) :where(a:not([class])){color:var(--amber-deep);text-decoration-color:rgba(146,64,14,.45)}
.aw-prose :is(.highlight-box,.callout,.tip-box) :where(ul,ol){margin:10px 0 12px}
.aw-prose .tip-label{display:block;margin:0 0 8px;font-family:var(--f-mono);font-size:11.5px;font-weight:500;line-height:1.35;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-deep)}

/* --------------------------------------------------------------------------
   4. Stat tiles — white tiles, Sora numbers (design .aw-stat / article tiles)
   -------------------------------------------------------------------------- */
.aw-prose :is(.stat-grid,.stat-row,.stats-strip,.stat-strip,.stats-grid,.workforce-grid){display:flex;flex-wrap:wrap;gap:10px;padding:0;list-style:none}
.aw-prose :is(.stat-card,.stat-box,.workforce-card){flex:1 1 180px;min-width:0;margin:0;padding:22px 20px;background:var(--white);border:1px solid var(--line);border-radius:16px;text-align:left}
.aw-prose :is(.stat-card,.stat-box,.workforce-card) :is(.num,.stat-number,.stat-value,.workforce-number){display:block;margin:0 0 10px;font-family:var(--f-display);font-weight:800;font-size:clamp(28px,2.6vw,36px);line-height:1.05;letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:break-word}
/* word-valued tiles ("Residency", "No API" — marked by the migration) read as the design's mono labels */
.aw-prose :is(.stat-card,.stat-box,.workforce-card) .aw-stat-word{margin:0 0 8px;font-family:var(--f-mono);font-weight:400;font-size:11.5px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);overflow-wrap:normal}
.aw-prose :is(.stat-card,.stat-box,.workforce-card) :is(.lbl,.stat-label,.workforce-label){display:block;margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.aw-prose :is(.stat-card,.stat-box) .aw-stat-word ~ :is(.lbl,.stat-label){color:var(--ink)}
/* four or more tiles share one row: smaller figures ("40 Mrd. $") */
.aw-prose :is(.stat-grid,.stat-row,.stats-strip,.stat-strip,.stats-grid,.workforce-grid):has(> :nth-child(4)) :is(.num,.stat-number,.stat-value,.workforce-number):not(.aw-stat-word){font-size:clamp(26px,2.3vw,32px)}
.aw-prose :is(.stat-card,.stat-box) > p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.aw-prose .stat-card.green :is(.num,.stat-number,.stat-value){color:#2F855A}
.aw-prose .stat-card.red :is(.num,.stat-number,.stat-value){color:#C2410C}
.aw-prose .stat-card.orange :is(.num,.stat-number,.stat-value){color:var(--amber)}
.aw-prose .stat-card.yellow :is(.num,.stat-number,.stat-value){color:var(--amber-ink)}

/* --------------------------------------------------------------------------
   5. Chart figures — white figure card (design <figure> 18px radius)
   -------------------------------------------------------------------------- */
.aw-prose :is(.chart-container,.chart-wrap,.svg-wrapper){position:relative;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:24px 24px 20px}
.aw-prose .chart-container :is(.chart-wrap,.svg-wrapper){margin:0;padding:0;border:0;border-radius:0;background:none}
.aw-prose .svg-wrapper{overflow-x:auto}
.aw-prose :is(.chart-wrap,.svg-wrapper) svg{display:block;width:100%;height:auto}
.aw-prose .chart-title{margin:0 0 18px;font-family:var(--f-display);font-weight:700;font-size:16px;line-height:1.35;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.aw-prose :is(.chart-caption,.svg-wrapper figcaption,.chart-container figcaption){margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted);text-align:left}
.aw-prose [id^="chart"]{max-width:100%}

/* --------------------------------------------------------------------------
   6. Closing CTA (.cta-section / .cta-box) — the design's dark CTA card
   -------------------------------------------------------------------------- */
.aw-prose :is(.cta-section,.cta-box){
  --fg:var(--on-night);--fg-muted:var(--on-night-muted);--accent-text:var(--amber-hi);--focus:var(--amber-hi);--hairline:rgba(255,255,255,.12);
  position:relative;overflow:hidden;isolation:isolate;margin:48px 0 0;padding:clamp(28px,4vw,40px);
  background:var(--night);color:var(--on-night);border:0;border-radius:24px;text-align:left}
.aw-prose :is(.cta-section,.cta-box)::before{content:"";position:absolute;z-index:-1;top:-60%;right:-20%;width:70%;padding-top:70%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(217,119,6,.35),rgba(217,119,6,0) 62%)}
.aw-prose :is(.cta-section,.cta-box) :is(h2,h3,h4){margin:0 0 14px;font-family:var(--f-display);font-weight:800;font-size:clamp(24px,2.8vw,32px);line-height:1.1;letter-spacing:-.03em;color:var(--on-night);text-wrap:balance}
.aw-prose :is(.cta-section,.cta-box) :where(p){margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--on-night-muted)}
.aw-prose :is(.cta-section,.cta-box) p:last-of-type{margin-bottom:24px}
.aw-prose :is(.cta-section,.cta-box) > :last-child{margin-bottom:0}
.aw-prose :is(.cta-section,.cta-box) :where(strong,b){color:var(--on-night)}
.aw-prose :is(.cta-section,.cta-box) :where(a:not([class])){color:var(--amber-hi);text-decoration-color:rgba(245,165,36,.5)}
.aw-prose :is(.cta-section,.cta-box) :where(a:not([class])):hover{color:var(--on-night)}
.aw-prose :is(.cta-btn,.cta-button){display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;padding:14px 22px;border:0;border-radius:var(--r-pill);background:var(--amber);color:var(--ink);font-family:var(--f-body);font-size:15.5px;font-weight:700;line-height:1.3;text-align:center;text-decoration:none;transition:background .2s ease,transform .2s ease}
.aw-prose :is(.cta-btn,.cta-button):hover{background:var(--amber-hi);color:var(--ink);transform:translateY(-1px)}
.aw-prose :is(.cta-btn,.cta-button):focus-visible{outline:2px solid var(--amber-hi);outline-offset:3px}

/* --------------------------------------------------------------------------
   7. Card grids — white bordered cards, Sora titles, mono amber labels
   -------------------------------------------------------------------------- */
/* 2 columns in the 760px column; 3 when the card count divides by 3 (or is 5), so no card is left alone */
.aw-prose :is(.tool-grid,.model-grid,.provider-grid,.pattern-grid,.comparison-grid,.trigger-grid,.partner-grid,.steps-grid,.feature-grid,.sector-grid){
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
.aw-prose :is(.tool-grid,.model-grid,.provider-grid,.pattern-grid,.comparison-grid,.trigger-grid,.partner-grid,.steps-grid,.feature-grid,.sector-grid):has(> :last-child:nth-child(3n)),
.aw-prose :is(.tool-grid,.model-grid,.provider-grid,.pattern-grid,.comparison-grid,.trigger-grid,.partner-grid,.steps-grid,.feature-grid,.sector-grid):has(> :last-child:nth-child(5)){
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.aw-prose .plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:12px}
.aw-prose :is(.news-grid,.step-grid,.quote-grid,.quotes-grid,.use-case-list){display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.aw-prose .partner-grid:has(> .partner-pill){display:flex;flex-wrap:wrap;gap:8px}

.aw-prose :is(.tool-card,.model-card,.provider-card,.news-card,.news-item,.use-case,.partner-card,.quote-card,.step-card,
  .pattern-card,.comparison-card,.trigger-card,.plan-card,.feature-card,.sector-card){
  min-width:0;margin:0;padding:22px 22px 20px;background:var(--white);border:1px solid var(--line);border-radius:16px;
  font-size:15.5px;line-height:1.6;color:var(--ink-body);text-align:left}
/* stand-alone cards stacked in the flow (digests: .news-item, B posts: .use-case) */
.aw-prose > :is(.news-item,.use-case,.model-card,.tool-card,.quote-card),
.aw-prose > section > :is(.news-item,.use-case,.model-card,.tool-card,.quote-card){margin:0 0 12px}
.aw-prose > :is(.news-item,.use-case,.model-card,.tool-card,.quote-card):last-child{margin-bottom:0}
.aw-prose :is(p,ul,ol) + :is(.news-item,.use-case){margin-top:28px}

/* card text */
.aw-prose :is(.tool-card,.model-card,.provider-card,.news-card,.news-item,.use-case,.partner-card,.step-card,
  .pattern-card,.comparison-card,.trigger-card,.feature-card,.sector-card) :where(p){margin:0 0 10px;font-size:15px;line-height:1.6;color:var(--muted)}
.aw-prose :is(.tool-card,.model-card,.provider-card,.news-card,.news-item,.use-case,.partner-card,.step-card,
  .pattern-card,.comparison-card,.trigger-card,.feature-card,.sector-card) > :last-child{margin-bottom:0}
.aw-prose :is(.tool-card,.model-card,.provider-card,.news-card,.news-item,.use-case,.step-card,.pattern-card,.comparison-card,.trigger-card,.sector-card) :where(ul,ol){margin:8px 0 0;padding-left:20px;font-size:15px;line-height:1.55;color:var(--muted)}
.aw-prose :is(.comparison-card,.pattern-card,.trigger-card) :where(li + li){margin-top:6px}
/* card titles */
.aw-prose :is(.tool-card,.model-card,.provider-card,.news-card,.news-item,.use-case,.partner-card,.step-card,
  .pattern-card,.comparison-card,.trigger-card,.sector-card) :is(h3,h4,h5){margin:0 0 8px;font-family:var(--f-display);font-weight:700;font-size:17px;line-height:1.3;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.aw-prose :is(.model-name,.partner-name,.step-title){display:block;margin:0 0 6px;font-family:var(--f-display);font-weight:700;font-size:17px;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.aw-prose .partner-name{font-size:15.5px;margin-bottom:2px}
/* mono amber labels */
.aw-prose :is(.tool-name,.model-provider,.news-tag,.fc-label,.plan-name){display:block;margin:0 0 10px;font-family:var(--f-mono);font-size:11.5px;font-weight:400;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink)}
.aw-prose .model-card .model-provider{margin:-2px 0 12px;color:var(--muted);letter-spacing:.06em}
.aw-prose .tool-card .tool-name{font-size:12px;font-weight:500}
.aw-prose .tool-card .tool-name + p{color:var(--ink)}
.aw-prose :is(.news-item,.news-card) .tag{display:inline-block;margin:0 0 12px;padding:4px 10px;border-radius:var(--r-pill);background:var(--amber-tint);color:var(--amber-deep);font-family:var(--f-mono);font-size:11px;font-weight:400;line-height:1.35;letter-spacing:.06em;text-transform:uppercase}
.aw-prose :is(.partner-role,.step-desc){display:block;font-size:14px;line-height:1.5;color:var(--muted);margin:0}
.aw-prose .fc-value{font-size:15.5px;font-weight:600;line-height:1.5;color:var(--ink)}
.aw-prose .partner-card{padding:16px 18px;font-size:15px;font-weight:600;color:var(--ink)}
.aw-prose .partner-note{margin:12px 0 26px;font-size:14px;line-height:1.55;color:var(--muted)}
.aw-prose .partner-pill{display:inline-block;padding:7px 14px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line);font-size:14px;font-weight:600;line-height:1.35;color:var(--ink);white-space:nowrap}

/* brand / tier marks: a small rounded square before the card title (design .aw-card__mark) */
.aw-prose :is(.provider-card,.model-card,.pattern-card,.comparison-card,.trigger-card) > :is(h3,h4)::before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:3px;background:var(--mark);vertical-align:.08em}
.aw-prose .provider-card.openai,.aw-prose .model-card.haiku,.aw-prose .pattern-card.do{--mark:#2F855A}
.aw-prose .provider-card.google,.aw-prose .trigger-card.api{--mark:var(--muted)}
.aw-prose .provider-card.mistral,.aw-prose .model-card.opus,.aw-prose .comparison-card.finetune,.aw-prose .trigger-card.github{--mark:var(--ink)}
.aw-prose .provider-card.other{--mark:var(--stone)}
.aw-prose .pattern-card.dont{--mark:#C2410C}

/* quote cards */
.aw-prose .quote-card{position:relative;padding:22px 24px 20px}
.aw-prose .quote-card::before{content:"\201C";content:"\201C" / "";display:block;height:22px;margin:0 0 4px;font-family:var(--f-display);font-weight:800;font-size:46px;line-height:1;color:var(--amber)}
.aw-prose .quote-card blockquote{margin:0 0 12px;padding:0;border:0;font-size:17px;line-height:1.6;font-style:normal;color:var(--ink)}
.aw-prose .quote-card :is(cite,.quote-author,.quote-source){display:block;font-family:var(--f-mono);font-size:11.5px;font-style:normal;font-weight:400;line-height:1.45;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* step cards: .step-number is a digit (circle) or a label ("Schritt 01") — one amber pill fits both */
.aw-prose .step-card .step-number{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:28px;height:28px;margin:0 0 12px;padding:0 9px;border-radius:var(--r-pill);background:var(--amber);color:var(--ink);font-family:var(--f-mono);font-size:12px;font-weight:500;line-height:1;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
/* RAG form: <div class="step-number">1</div><div><h4>…</h4><p>…</p></div> → number beside the text */
.aw-prose .step-card:has(> .step-number + div:last-child){display:flex;gap:16px;align-items:flex-start}
.aw-prose .step-card:has(> .step-number + div:last-child) > .step-number{margin:0}
.aw-prose .step-card > .step-number + div:last-child{min-width:0}
/* Glasswing form (.step-number, .step-title, .step-desc stacked): lay the cards out as a grid */
.aw-prose .step-grid:has(> .step-card > .step-title){grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}

/* plan cards (Claude Code routines) */
.aw-prose .plan-card{padding:20px 20px 18px}
.aw-prose .plan-runs{margin:0 0 4px;font-family:var(--f-display);font-weight:800;font-size:clamp(32px,3.6vw,40px);line-height:1;letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.aw-prose .plan-card.pro .plan-runs{color:var(--muted)}
.aw-prose .plan-card.max .plan-runs{color:var(--amber)}
.aw-prose .plan-card.team .plan-runs{color:#2F855A}
.aw-prose .plan-unit{font-size:14px;line-height:1.4;color:var(--muted)}

/* --------------------------------------------------------------------------
   8. Row lists — white rows with an amber disc / icon tile (design .aw-steps)
   -------------------------------------------------------------------------- */
.aw-prose :is(.factor-list,.usecase-list,.strength-list,.workforce-list){list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.aw-prose :is(.factor-list,.usecase-list,.strength-list,.workforce-list) > li{display:flex;gap:14px;align-items:flex-start;margin:0;padding:16px 18px;background:var(--white);border:1px solid var(--line);border-radius:14px;font-size:16px;line-height:1.6}
.aw-prose :is(.factor-list,.usecase-list,.strength-list,.workforce-list) > li::marker{content:none}
.aw-prose .factor-num{flex:none;display:grid;place-items:center;width:26px;height:26px;margin-top:1px;border-radius:50%;background:var(--amber);color:var(--ink);font-family:var(--f-mono);font-size:12px;font-weight:500;line-height:1}
.aw-prose :is(.factor-text,.usecase-text,.sl-text,.wf-text){min-width:0;color:var(--muted);font-size:15.5px;line-height:1.6}
.aw-prose :is(.factor-text,.usecase-text) strong{display:block;margin-bottom:2px;font-size:16px;color:var(--ink)}
.aw-prose :is(.factor-text,.usecase-text) span{display:block}
.aw-prose :is(.sl-text,.wf-text) strong{color:var(--ink)}
.aw-prose :is(.usecase-icon,.sl-icon){flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--paper);font-size:18px;line-height:1}
.aw-prose .usecase-icon.schedule{background:var(--amber-tint)}
.aw-prose .usecase-icon.api{background:var(--paper-2)}
.aw-prose .usecase-icon.github{background:#E7E5DF}
.aw-prose .wf-number{flex:none;min-width:64px;font-family:var(--f-display);font-weight:800;font-size:26px;line-height:1.1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}

/* checklist: round ✓ ticks (design .aw-ticks) */
.aw-prose ul.checklist,.aw-prose .checklist ul{list-style:none;padding-left:0}
.aw-prose .checklist li{position:relative;padding-left:34px}
.aw-prose .checklist li::marker{content:none}
.aw-prose .checklist li::before{content:"\2713";content:"\2713" / "";position:absolute;left:0;top:3px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--amber-tint);color:var(--amber-ink);font-size:12px;font-weight:700;line-height:1}

/* timeline: amber dots on a hairline */
.aw-prose .timeline{display:flex;flex-direction:column;gap:0}
.aw-prose .timeline-item{position:relative;display:flex;gap:16px;align-items:flex-start;padding:0 0 20px}
.aw-prose .timeline-item:last-child{padding-bottom:0}
.aw-prose .timeline-item:not(:last-child)::before{content:"";position:absolute;left:5px;top:20px;bottom:0;width:2px;background:var(--line)}
.aw-prose .timeline-dot{flex:none;width:12px;height:12px;margin-top:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px var(--amber-tint)}
.aw-prose .timeline-content{min-width:0;font-size:16px;line-height:1.6}
.aw-prose .timeline-content strong{display:block;margin-bottom:2px;font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-ink)}
.aw-prose .timeline-content span{color:var(--muted)}

/* --------------------------------------------------------------------------
   9. Badges and tags — mono pills (design table level pills)
      neutral: paper · amber: solid · ink: dark · tint: amber-tint · green · rust
   -------------------------------------------------------------------------- */
.aw-prose :is(.badge,.tag-open,.tag-prop,.new-badge,.category-badge,.post-category){display:inline-block;padding:3px 10px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);color:var(--muted);
  font-family:var(--f-mono);font-size:11.5px;font-weight:500;line-height:1.45;letter-spacing:.02em;text-transform:none;white-space:nowrap;vertical-align:.1em}
.aw-prose :is(.badge-best,.badge-sonnet,.badge-orange,.new-badge){background:var(--amber);border-color:transparent;color:var(--ink)}
.aw-prose :is(.badge-strong,.badge-opus,.badge-github){background:var(--ink);border-color:transparent;color:var(--on-night)}
.aw-prose :is(.badge-good,.badge-schedule,.badge-partial,.badge-yellow){background:var(--amber-tint);border-color:transparent;color:var(--amber-deep)}
.aw-prose :is(.badge-green,.badge-yes,.badge-haiku,.tag-open){background:#E3F1E8;border-color:transparent;color:#1F6B45}
.aw-prose :is(.badge-red,.badge-no){background:#FDF0E8;border-color:#F3C9AE;color:#9A3412}
.aw-prose :is(.badge-api,.tag-prop){background:var(--paper);border-color:var(--line);color:var(--muted)}
.aw-prose .new-badge{margin-left:8px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;vertical-align:.2em}
.aw-prose :is(.category-badge,.post-category){background:var(--amber-tint);border-color:transparent;color:var(--amber-deep);text-transform:uppercase;letter-spacing:.06em;font-weight:400}
.aw-prose td :is(.badge,.tag-open,.tag-prop){vertical-align:baseline}

/* --------------------------------------------------------------------------
   10. Code blocks (pre, .code-block) — ink panel, mono; syntax spans scoped
   -------------------------------------------------------------------------- */
.aw-prose :is(pre,.code-block){overflow-x:auto;padding:20px 22px;background:var(--ink);color:var(--on-night);border:0;border-radius:16px;font-family:var(--f-mono);font-size:13.5px;line-height:1.7;tab-size:2;-webkit-overflow-scrolling:touch}
.aw-prose pre{white-space:pre}
.aw-prose .code-block{white-space:pre-wrap;overflow-wrap:anywhere}
.aw-prose :is(pre,.code-block) code{padding:0;background:none;color:inherit;font-size:inherit;border-radius:0;overflow-wrap:normal}
.aw-prose :is(pre,.code-block) :is(.comment){color:#8A8E98;font-style:italic}
.aw-prose :is(pre,.code-block) :is(.key){color:var(--blue)}
.aw-prose :is(pre,.code-block) :is(.string,.value){color:var(--green)}
.aw-prose :is(pre,.code-block) :is(.keyword,.label){color:var(--amber-hi);font-weight:500}
.aw-prose :is(pre,.code-block):focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* --------------------------------------------------------------------------
   11. Page bits, small screens, no-JS, print
   -------------------------------------------------------------------------- */
.aw-related--empty{padding:0 0 var(--section-y)}

@media (max-width:640px){
  .aw-prose{font-size:17px}
  .aw-prose :where(h2){margin-top:44px}
  .aw-prose :is(.highlight-box,.callout,.tip-box){padding:18px 20px;font-size:16px}
  .aw-prose :is(.chart-container,.chart-wrap,.svg-wrapper){padding:18px 14px 14px;border-radius:16px}
  .aw-prose .chart-container .chart-title{margin-bottom:12px}
  .aw-prose :is(.cta-section,.cta-box){padding:28px 22px;border-radius:20px}
  .aw-prose :is(.cta-btn,.cta-button){width:100%}
  .aw-prose :where(th){padding:12px 14px}
  .aw-prose :where(td){padding:12px 14px;font-size:14px}
  .aw-prose :is(.stat-card,.stat-box,.workforce-card){flex-basis:140px;padding:18px 16px}
  .aw-prose :is(pre,.code-block){padding:16px;font-size:12.5px;border-radius:14px}
  .aw-prose :is(.factor-list,.usecase-list,.strength-list,.workforce-list) > li{padding:14px 16px;gap:12px}
}
@media (max-width:480px){
  .aw-prose :where(h2,h3){-webkit-hyphens:auto;hyphens:auto;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;hyphenate-limit-chars:10 4 4}
}
/* Without aw.js the tables are not wrapped: let them scroll on their own */
html:not(.aw-js) .aw-prose table{display:block;min-width:0;max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--white)}

@media print{
  .aw-prose{font-size:11.5pt;color:#000}
  .aw-prose :is(.cta-section,.cta-box){background:#fff;color:#000;border:1px solid #999}
  .aw-prose :is(.cta-section,.cta-box)::before{display:none}
  .aw-prose :is(.cta-section,.cta-box) :is(h2,h3,h4,p,strong){color:#000}
  .aw-prose :is(pre,.code-block){background:#f4f4f4;color:#000}
  .aw-related,.aw-toc-cta{display:none}
}