/* === Claw Blog — Extras (orphan classes shared across review/template articles) ===
   Loaded AFTER claw-shared.css. Articles that redefine these in their own
   inline <style> keep their version (inline wins the cascade). Articles that
   only USE them get a clean, consistent Yandex-themed fallback here. */

:root{
  /* IBM-style accent theme used by several review articles */
  --ibm-red:#FC3F1D; --ibm-orange:#FF6B3D; --ibm-purple:#7B61FF;
  --ibm-blue:#005FF9; --ibm-text:#1D1D1F; --ibm-text2:#515154;
  --ibm-text3:#86868B; --ibm-border:rgba(0,0,0,.08); --ibm-radius:12px;
  --yan-dark:#1D1D1F;
}

/* --- Article subtitle (under h1) --- */
.article-subtitle{font-size:1.0625rem;line-height:1.6;color:var(--yan-text2,#515154);
  margin:-.5rem 0 1.5rem;font-weight:400;max-width:42em;}

/* --- Editor's take / thought box --- */
.editors-thought{border-left:4px solid var(--yan-yellow,#FFCC00);
  background:rgba(255,204,0,.07);padding:1.1rem 1.5rem;margin:1.75rem 0;
  border-radius:0 10px 10px 0;}
.editors-thought p{margin-bottom:.5rem;color:var(--yan-text2,#515154);}
.editors-thought p:last-child{margin-bottom:0;}
.thought-label{font-family:'IBM Plex Mono',monospace;font-size:.68rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--yan-red,#FC3F1D);
  margin-bottom:.5rem;display:block;}

/* --- Z.AI affiliate banner --- */
.zai-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--yan-red,#FC3F1D),#FF6B3D);
  color:#fff;border-radius:12px;padding:1rem 1.5rem;margin:1.5rem 0;font-size:.9rem;}
.zai-banner span{font-weight:700;}
.zai-banner strong{font-weight:800;}
.zai-banner a{color:#fff;text-decoration:underline;font-weight:600;}
.zai-banner-link,.zai-banner a.zai-arrow{display:inline-block;background:#fff;color:var(--yan-red,#FC3F1D);
  padding:.5rem 1.1rem;border-radius:20px;text-decoration:none;font-weight:700;margin-left:auto;}
.zai-text{color:#fff;}
.zai-badge,.zai-badge{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;
  font-size:.65rem;background:rgba(255,255,255,.18);color:#fff;padding:3px 10px;border-radius:100px;}

/* --- Pros/cons columns --- */
.pros-cons-col{background:var(--yan-surface,#fff);border:1px solid var(--yan-border,rgba(0,0,0,.06));
  border-radius:12px;padding:1.1rem 1.3rem;}
.pros-cons-col h3{margin-top:0;font-size:.95rem;}

/* --- Text accent helpers --- */
.t-purple,.t-purple{color:#7B61FF;font-weight:600;}
.t-blue,.t-blue{color:#005FF9;font-weight:600;}
.t-green,.t-green{color:#42be65;font-weight:600;}
.t-teal,.t-teal{color:#0098A6;font-weight:600;}

/* --- Tag color variants --- */
.tag-red{background:rgba(252,63,29,.1);color:#FC3F1D;}
.tag-teal{background:rgba(0,152,166,.12);color:#0098A6;}
.tag-purple{background:rgba(123,97,255,.12);color:#7B61FF;}
.tag-blue{background:rgba(0,95,249,.1);color:#005FF9;}
.tag-orange{background:rgba(255,107,61,.12);color:#FF6B3D;}
.tag-green{background:rgba(66,190,101,.12);color:#42be65;}

/* --- Back-to-blog link variant --- */
.back-to-blog{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;
  color:var(--yan-red,#FC3F1D);text-decoration:none;padding:.5rem 0;transition:gap .2s;}
.back-to-blog:hover{gap:10px;text-decoration:none;}

/* --- Highlight callouts (hl-*) --- */
.hl-red{background:rgba(252,63,29,.08);border-left:3px solid #FC3F1D;padding:.6rem .9rem;border-radius:0 8px 8px 0;margin:.75rem 0;}
.hl-green{background:rgba(66,190,101,.08);border-left:3px solid #42be65;padding:.6rem .9rem;border-radius:0 8px 8px 0;margin:.75rem 0;}
.hl-blue{background:rgba(0,95,249,.08);border-left:3px solid #005FF9;padding:.6rem .9rem;border-radius:0 8px 8px 0;margin:.75rem 0;}
.hl-purple{background:rgba(123,97,255,.08);border-left:3px solid #7B61FF;padding:.6rem .9rem;border-radius:0 8px 8px 0;margin:.75rem 0;}

/* --- Findings grid --- */
.findings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.5rem 0;}
.finding-card{border:1px solid var(--yan-border,rgba(0,0,0,.06));border-radius:12px;padding:1.1rem;background:var(--yan-surface,#fff);}
.finding-number,.finding-num{font-family:'IBM Plex Mono',monospace;font-size:1.4rem;font-weight:700;color:var(--yan-red,#FC3F1D);}
.finding-content{color:var(--yan-text2,#515154);font-size:.92rem;margin-top:.4rem;}

/* --- Timeline --- */
.timeline{position:relative;margin:1.5rem 0;padding-left:1.5rem;border-left:2px solid var(--yan-border,rgba(0,0,0,.12));}
.timeline-item{position:relative;margin-bottom:1.25rem;}
.timeline-time,.tl-time{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--yan-red,#FC3F1D);font-weight:600;}
.timeline-title,.tl-title{font-weight:700;color:var(--yan-text,#1D1D1F);margin:.2rem 0;}
.timeline-content,.tl-desc{font-size:.9rem;color:var(--yan-text2,#515154);}

/* --- Verdict content --- */
.verdict-content{color:var(--yan-text2,#515154);}
.verdict-content p{margin-bottom:.75rem;}

/* --- Impact box --- */
.impact-box{border-left:4px solid var(--ibm-purple,#7B61FF);background:rgba(123,97,255,.06);
  padding:1.1rem 1.5rem;margin:1.5rem 0;border-radius:0 10px 10px 0;}
.impact-box .note,.impact-box p{color:var(--yan-text2,#515154);}

/* --- Comparison table --- */
.comparison-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.9rem;}
.comparison-table th{background:var(--yan-surface2,#F0F0F3);padding:.7rem 1rem;text-align:left;font-weight:700;border-bottom:2px solid var(--yan-border-s,rgba(0,0,0,.12));}
.comparison-table td{padding:.7rem 1rem;border-bottom:1px solid var(--yan-border,rgba(0,0,0,.06));}
.check{color:#42be65;font-weight:700;}

/* --- Repo cards --- */
.repo-card{border:1px solid var(--yan-border,rgba(0,0,0,.06));border-radius:12px;padding:1.1rem;margin:.9rem 0;background:var(--yan-surface,#fff);}
.repo-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.repo-name{font-weight:700;color:var(--yan-text,#1D1D1F);}
.repo-stars{font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--yan-text3,#86868B);}
.repo-desc{color:var(--yan-text2,#515154);font-size:.9rem;margin:.5rem 0;}
.repo-tags{display:flex;gap:.4rem;flex-wrap:wrap;}
.repo-tag{font-size:.65rem;font-family:'IBM Plex Mono',monospace;background:var(--yan-surface2,#F0F0F3);
  color:var(--yan-text3,#86868B);padding:2px 8px;border-radius:100px;}

/* --- Feature grid --- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.5rem 0;}
.feature-card{border:1px solid var(--yan-border,rgba(0,0,0,.06));border-radius:12px;padding:1.1rem;background:var(--yan-surface,#fff);}
.feature-card h3{margin-top:0;font-size:.95rem;}

/* --- Quote --- */
.quote{border-left:4px solid var(--ibm-purple,#7B61FF);background:var(--yan-surface2,#F0F0F3);
  padding:1rem 1.5rem;margin:1.5rem 0;border-radius:0 8px 8px 0;font-style:italic;color:var(--yan-text2,#515154);}

/* --- Chart / metrics --- */
.chart-container{border:1px solid var(--yan-border,rgba(0,0,0,.06));border-radius:12px;padding:1.25rem;margin:1.5rem 0;background:var(--yan-surface,#fff);}
.metric-value,.key-metric{font-size:1.6rem;font-weight:800;color:var(--yan-red,#FC3F1D);}
.metric-desc{font-size:.8rem;color:var(--yan-text3,#86868B);}
.performance{font-family:'IBM Plex Mono',monospace;font-size:.85rem;color:var(--yan-text2,#515154);}

/* --- Tool cards --- */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.5rem 0;}
.tool-card{border:1px solid var(--yan-border,rgba(0,0,0,.06));border-radius:12px;padding:1.1rem;background:var(--yan-surface,#fff);}
.tool-name{font-weight:700;color:var(--yan-text,#1D1D1F);}
.tool-status{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--yan-text3,#86868B);}

/* --- Step / share boxes (tutorials) --- */
.step-box{border:1px solid var(--yan-border,rgba(0,0,0,.06));border-radius:12px;padding:1.1rem 1.3rem;margin:1rem 0;background:var(--yan-surface,#fff);position:relative;padding-left:3.2rem;}
.step-num{position:absolute;left:1rem;top:1.1rem;width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--yan-red,#FC3F1D);color:#fff;font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;}
.share-box{border:1px dashed var(--yan-border-s,rgba(0,0,0,.12));border-radius:12px;padding:1.1rem 1.3rem;margin:1rem 0;background:var(--yan-surface2,#F0F0F3);}
.warning-box{border-left:4px solid #FFB020;background:rgba(255,176,32,.08);padding:1.1rem 1.5rem;margin:1.5rem 0;border-radius:0 8px 8px 0;color:var(--yan-text2,#515154);}

/* --- Promo blocks (single-article custom) --- */
.promo-title{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:.3rem;}
.promo-subtitle,.hero-desc,.hero-subtitle{color:rgba(255,255,255,.92);font-size:.9rem;}
.promo-code{font-family:'IBM Plex Mono',monospace;background:rgba(255,255,255,.15);color:#fff;padding:.2rem .6rem;border-radius:6px;font-size:.85rem;}
.promo-tag,.promo-badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.6rem;background:rgba(255,255,255,.2);color:#fff;padding:2px 8px;border-radius:100px;}
.promo-mimo,.mimo{color:#fff;font-weight:700;}
.zaia,.promo-zaia{color:rgba(255,255,255,.92);font-size:.9rem;}

/* --- TOC --- */
.toc{border:1px solid var(--yan-border,rgba(0,0,0,.06));border-radius:12px;padding:1.1rem 1.3rem;margin:1.5rem 0;background:var(--yan-surface,#fff);}
.toc a{color:var(--yan-blue,#005FF9);text-decoration:none;font-size:.9rem;display:block;padding:.2rem 0;}
.toc a:hover{text-decoration:underline;}

/* --- Misc single-use --- */
.section-divider{border:none;border-top:1px solid var(--yan-border,rgba(0,0,0,.06));margin:2.5rem 0;}
.meta-label{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--yan-text3,#86868B);text-transform:uppercase;letter-spacing:.05em;}
.meta-row{display:flex;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--yan-text3,#86868B);margin-bottom:1rem;}
.incident{border:1px solid var(--yan-border,rgba(0,0,0,.06));border-left:4px solid var(--yan-red,#FC3F1D);border-radius:0 10px 10px 0;padding:1.1rem 1.3rem;margin:1rem 0;background:var(--yan-surface,#fff);}
.tested{color:#42be65;font-weight:600;}
.untested{color:#FFB020;font-weight:600;}
.arch{border:1px solid var(--yan-border,rgba(0,0,0,.06));border-radius:12px;padding:1.1rem;margin:.9rem 0;background:var(--yan-surface,#fff);}
.link-box{border:1px solid var(--yan-border,rgba(0,0,0,.06));border-radius:12px;padding:1.1rem 1.3rem;margin:1rem 0;background:var(--yan-surface2,#F0F0F3);}
.number{font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--yan-red,#FC3F1D);}