/* === Claw Blog Unified Dark-Theme CSS === */
:root {
  --ibm-blue:#0f62fe; --ibm-blue-40:#a6c8ff; --ibm-blue-20:#d0e2ff;
  --ibm-purple:#a56eff; --ibm-teal:#08bdba; --ibm-green:#42be65;
  --ibm-red:#fa4d56; --ibm-orange:#ff832b; --ibm-yellow:#f1c21b;
  --ibm-bg:#0a0a0a; --ibm-surface:#161616; --ibm-surface2:#1c1c1c;
  --ibm-surface3:#222; --ibm-text:#f4f4f4; --ibm-text2:#c6c6c6;
  --ibm-text3:#8d8d8d; --ibm-text4:#565656;
  --ibm-border:rgba(255,255,255,.08); --ibm-border-s:rgba(255,255,255,.15);
  --radius:12px; --radius-sm:8px;
}
/* Universal Typography */
body { font-size:18px; line-height:1.7; color:var(--ibm-text); background:var(--ibm-bg); font-family:'IBM Plex Sans',sans-serif; margin:0; }
h1,h2,h3,h4,h5,h6 { color:var(--ibm-text); font-weight:600; }
a { color:var(--ibm-blue-40); text-decoration:none; }
a:hover { text-decoration:underline; }
@media (max-width:600px) { body { font-size:16px; } }

/* Skip link */
.skip-link { position:absolute; top:-100px; left:16px; background:var(--ibm-blue); color:#fff; padding:8px 16px; border-radius:4px; z-index:200; }
.skip-link:focus { top:16px; }

/* Keyboard focus */
a:focus-visible,button:focus-visible,input:focus-visible,.filter-pill:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--ibm-blue); outline-offset:2px; border-radius:4px;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  html { scroll-behavior:auto; }
}

/* Print styles */
@media print {
  nav,footer,.hero,.newsletter,.search-bar,.filter-bar,.copy-btn { display:none; }
  body { background:#fff; color:#000; font-size:12pt; }
  a { color:#000; text-decoration:underline; }
  pre,code { background:#f5f5f5; border:1px solid #ddd; color:#000; }
  .post-card,.repo-card,.skill-card,.principle,section { break-inside:avoid; border:1px solid #ccc; padding:1rem 0; max-width:100%; }
}

/* Copy button */
pre { position:relative; white-space:pre-wrap; word-break:break-all; overflow-x:auto; }
.copy-btn {
  position:absolute; top:.5em; right:.5em;
  background:var(--ibm-surface2); border:1px solid var(--ibm-border-s);
  border-radius:4px; padding:.25em .75em; font-size:.75em;
  cursor:pointer; opacity:.7; color:var(--ibm-text2);
  font-family:'IBM Plex Sans',sans-serif;
}
.copy-btn:hover { opacity:1; color:var(--ibm-text); background:var(--ibm-surface3); }

/* Callout boxes */
.note { background:rgba(139,92,246,.08); border-left:3px solid var(--ibm-purple); padding:.75rem 1rem; margin:1.5rem 0; font-size:.9rem; color:var(--ibm-text2); border-radius:0 var(--radius) var(--radius) 0; }
.note-teal { background:rgba(8,189,186,.08); border-left:3px solid var(--ibm-teal); padding:.75rem 1rem; margin:1.5rem 0; font-size:.9rem; color:var(--ibm-text2); border-radius:0 var(--radius) var(--radius) 0; }
.note-green { background:rgba(66,190,101,.08); border-left:3px solid var(--ibm-green); padding:.75rem 1rem; margin:1.5rem 0; font-size:.9rem; color:var(--ibm-text2); border-radius:0 var(--radius) var(--radius) 0; }
.note-warning { background:rgba(250,77,86,.08); border-left:3px solid var(--ibm-red); padding:.75rem 1rem; margin:1.5rem 0; font-size:.9rem; color:var(--ibm-text2); border-radius:0 var(--radius) var(--radius) 0; }
.note-info { background:rgba(15,98,254,.08); border-left:3px solid var(--ibm-blue); padding:.75rem 1rem; margin:1.5rem 0; font-size:.9rem; color:var(--ibm-text2); border-radius:0 var(--radius) var(--radius) 0; }

/* Tables */
table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.85rem; }
th { background:var(--ibm-surface); padding:8px 12px; text-align:left; font-weight:600; color:var(--ibm-text); border-bottom:2px solid var(--ibm-border-s); }
td { padding:8px 12px; border-bottom:1px solid var(--ibm-border); color:var(--ibm-text2); background:var(--ibm-surface); }
tr:last-child td { border-bottom:none; }

/* Code */
pre { background:var(--ibm-surface); border:1px solid var(--ibm-border); border-radius:var(--radius); padding:1.5rem; overflow-x:auto; margin:1.5rem 0; font-family:'IBM Plex Mono',monospace; font-size:.82rem; line-height:1.7; color:var(--ibm-text); max-height:70vh; overflow-y:auto; }
code { background:var(--ibm-surface); padding:.15rem .4rem; border-radius:4px; font-size:.85rem; color:var(--ibm-blue-40); white-space:pre-wrap; word-break:break-all; }
@media (max-width:600px) { pre { white-space:pre-wrap; word-break:break-all; } code { white-space:pre-wrap; word-break:break-all; } }

/* Reading time */
.reading-time { font-family:'IBM Plex Mono',monospace; font-size:.65rem; color:var(--ibm-text4); display:inline-flex; align-items:center; gap:4px; }

/* New badge */
.new-badge { display:inline-flex; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:.6rem; padding:2px 8px; border-radius:100px; background:rgba(66,190,101,.15); color:var(--ibm-green); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }

/* Section / article inner */
.section { margin:2.5rem 0; color:var(--ibm-text2); font-size:.95rem; line-height:1.7; }
.section h2 { font-size:1.15rem; font-weight:600; margin-bottom:1rem; color:var(--ibm-purple); }
.section h3 { font-size:.95rem; font-weight:600; margin:1.25rem 0 .5rem; color:var(--ibm-blue-40); }
.section p { margin-bottom:.75rem; }
.section ul,.section ol { margin:.5rem 0 .75rem 1.25rem; line-height:1.7; }
.section li { margin-bottom:.4rem; }
.meta { display:flex; gap:1.5rem; margin:1.5rem 0; font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--ibm-text3); flex-wrap:wrap; }
.meta span { display:flex; align-items:center; gap:6px; }
blockquote { border-left:3px solid var(--ibm-blue-40); padding:.5rem 1rem; margin:1.5rem 0; color:var(--ibm-text3); font-style:italic; }
hr { border:none; border-top:1px solid var(--ibm-border); margin:2.5rem 0; }
strong { color:var(--ibm-text); }

/* Pros/cons and verdict */
.verdict { background:linear-gradient(135deg,rgba(8,189,186,.1),rgba(66,190,101,.08)); border:1px solid rgba(8,189,186,.2); border-radius:var(--radius); padding:1.5rem; margin:2rem 0; }
.verdict h3 { color:var(--ibm-teal); margin-bottom:.75rem; }
.pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1rem 0; }
@media (max-width:500px) { .pros-cons { grid-template-columns:1fr; } }
.pros { background:rgba(66,190,101,.06); border-radius:var(--radius); padding:1rem; }
.cons { background:rgba(250,77,86,.06); border-radius:var(--radius); padding:1rem; }
.pros h4 { color:var(--ibm-green); font-size:.85rem; margin-bottom:.5rem; }
.cons h4 { color:var(--ibm-red); font-size:.85rem; margin-bottom:.5rem; }
.pros li,.cons li { font-size:.85rem; margin-bottom:.3rem; color:var(--ibm-text2); }

/* Stat cards */
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin:1.5rem 0; }
@media (max-width:500px) { .stat-row { grid-template-columns:repeat(2,1fr); } }
.stat-card { background:var(--ibm-surface); border:1px solid var(--ibm-border); border-radius:var(--radius); padding:1rem; text-align:center; }
.stat-card .num { font-size:1.5rem; font-weight:700; color:var(--ibm-teal); }
.stat-card .label { font-size:.7rem; color:var(--ibm-text3); margin-top:.25rem; font-family:'IBM Plex Mono',monospace; }

/* Affiliate disclosure */
.affiliate-disclosure { font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:var(--ibm-text4); margin-left:4px; }