/* ================================================================
   AI @ Devops Monk — Custom Styles
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---- Variables ---- */
:root {
  --primary:       #7c3aed;
  --primary-dark:  #6d28d9;
  --primary-light: #a78bfa;
  --dark:          #0f172a;
  --dark-2:        #1e293b;
  --dark-3:        #334155;
  --text:          #1e293b;
  --text-muted:    #64748b;
  --bg:            #f8fafc;
  --surface:       #ffffff;
  --border:        #e2e8f0;
  --code-bg:       #1e293b;
  --radius:        8px;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.10);
  --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:          'JetBrains Mono', 'Courier New', monospace;
}

/* ---- Base ---- */
body {
  font-family: var(--font) !important;
  color: var(--text) !important;
  background: var(--bg) !important;
  line-height: 1.75 !important;
  font-size: 16px !important;
}

a { transition: color 0.15s; }

/* ---- Header ---- */
.site-header {
  background: var(--dark) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.35) !important;
}

.header-main {
  padding: 1.25em 2em !important;
  background: var(--dark) !important;
}

.site-title {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: 1.55rem !important;
  letter-spacing: -0.4px !important;
}

.site-title a:link,
.site-title a:visited {
  color: #f5f3ff !important;
}

.site-title a:hover,
.site-title a:active {
  color: var(--primary-light) !important;
}

.site-description {
  color: #94a3b8 !important;
  font-size: 0.82rem !important;
  margin: 0.1em 0 0 !important;
  letter-spacing: 0.3px !important;
}

/* ---- Navigation ---- */
.primary-navigation-wrap {
  background: var(--dark-2) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}

.main-navigation-menu a {
  font-family: var(--font) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.8em 1.3em !important;
  color: #cbd5e1 !important;
  letter-spacing: 0.15px !important;
  transition: color 0.15s, background 0.15s !important;
  border-bottom: 2px solid transparent !important;
}

.main-navigation-menu a:link,
.main-navigation-menu a:visited {
  color: #cbd5e1 !important;
  text-decoration: none !important;
}

.main-navigation-menu a:hover,
.main-navigation-menu a:active {
  color: #f5f3ff !important;
  background: rgba(255,255,255,0.06) !important;
}

.main-navigation-menu li.current-menu-item > a,
.main-navigation-menu li.current_page_item > a {
  color: var(--primary-light) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--primary-light) !important;
}

/* ---- Container width ---- */
.site {
  max-width: 1440px !important;
  margin: 0 auto !important;
  box-shadow: none !important;
}

.header-main { padding: 1.25em 2.5em !important; }

.primary-navigation .container,
.site-content.container,
#content.container,
.container { max-width: 1440px !important; }

.content-area { padding: 2em 2em 0 !important; width: 72% !important; }

.sidebar      { padding: 2em 1.5em 0 !important; width: 28% !important; }

/* The 72/28 split above uses !important, which beat the theme's own stacking
   rule at 60em — so on a phone the sidebar stayed a 28%-wide sliver (about
   109px at 390px) instead of going full width under the content. Match the
   theme's breakpoint and stack properly. */
@media only screen and (max-width: 60em) {
  .content-area,
  .sidebar {
    width: 100% !important;
    float: none !important;
  }
  .sidebar {
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
  }
}

/* ---- Page background ---- */
.site-content { padding: 1.5em 0 !important; }

/* ---- Post cards (list view) ---- */
.type-post,
.hentry {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  margin-bottom: 1.75em !important;
  padding: 1.75em 2em !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}

.type-post:hover,
.hentry:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* ---- Entry titles ---- */
.entry-title {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  line-height: 1.3 !important;
  margin: 0.3em 0 0.5em !important;
}

.entry-title a:link,
.entry-title a:visited {
  color: var(--dark) !important;
  text-decoration: none !important;
}

.entry-title a:hover,
.entry-title a:active {
  color: var(--primary) !important;
}

/* ---- Post meta ---- */
.entry-meta {
  color: var(--text-muted) !important;
  font-size: 0.8rem !important;
  font-family: var(--font) !important;
}

.entry-meta a { color: var(--primary) !important; text-decoration: none !important; }

/* ---- Tags on post cards ---- */
.post-tags a {
  display: inline-block;
  background: #f5f3ff;
  color: var(--primary-dark) !important;
  border: 1px solid #bae6fd;
  border-radius: 999px;
  padding: 0.1em 0.65em;
  font-size: 0.75rem !important;
  font-weight: 500;
  margin: 0.15em 0.1em;
  text-decoration: none !important;
  transition: background 0.15s;
}

.post-tags a:hover { background: #ede9fe !important; }

/* ---- Read more link ---- */
.more-link,
.more-link:link,
.more-link:visited {
  display: inline-block !important;
  margin-top: 0.85em !important;
  padding: 0.45em 1.1em !important;
  background: transparent !important;
  color: var(--primary) !important;
  border: 1.5px solid var(--primary) !important;
  border-radius: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  letter-spacing: 0.2px !important;
  transition: background 0.15s, color 0.15s !important;
}

.more-link:hover,
.more-link:active {
  background: var(--primary) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ---- Single post content ---- */
.entry-content {
  font-size: 1rem !important;
  line-height: 1.85 !important;
  color: var(--dark-3) !important;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  margin-top: 2em !important;
  margin-bottom: 0.5em !important;
  line-height: 1.25 !important;
}

.entry-content h2 {
  font-size: 1.5rem !important;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0.35em;
}

.entry-content h3 { font-size: 1.2rem !important; }
.entry-content h4 { font-size: 1.05rem !important; }

.entry-content a {
  color: var(--primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.entry-content a:hover { color: var(--primary-dark) !important; }

/* ---- Code ---- */
code, kbd, tt, var {
  font-family: var(--mono) !important;
  font-size: 0.875em !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  padding: 0.15em 0.4em !important;
  border-radius: 4px !important;
}

pre {
  background: var(--code-bg) !important;
  border-radius: var(--radius) !important;
  padding: 1.4em 1.6em !important;
  overflow-x: auto !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
}

pre code {
  background: transparent !important;
  padding: 0 !important;
  color: #e2e8f0 !important;
  font-size: inherit !important;
}

/* ---- Blockquote ---- */
blockquote {
  border-left: 4px solid var(--primary) !important;
  background: #f5f3ff !important;
  padding: 0.9em 1.4em !important;
  margin: 1.5em 0 !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  color: #1e40af !important;
  font-style: normal !important;
}

blockquote p { margin: 0 !important; }

/* ---- Tables ---- */
.entry-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1.75em 0 !important;
  font-size: 0.9rem !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
}

.entry-content table th {
  background: var(--dark-2) !important;
  color: #f5f3ff !important;
  font-weight: 600 !important;
  padding: 0.75em 1em !important;
  text-align: left !important;
  font-family: var(--font) !important;
}

.entry-content table td {
  padding: 0.65em 1em !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.entry-content table tr:last-child td { border-bottom: none !important; }
.entry-content table tr:nth-child(even) td { background: #f8fafc !important; }
.entry-content table tr:hover td { background: #f5f3ff !important; }

/* ---- Horizontal rule ---- */
hr {
  border: none !important;
  border-top: 1px solid var(--border) !important;
  margin: 2.5em 0 !important;
}

/* ---- Mermaid diagrams ---- */
pre.mermaid {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  padding: 2em 1em !important;
  text-align: center !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow-x: auto !important;
}

/* --surface is not redefined for dark mode (the theme overrides components
   one by one), so mermaid blocks rendered as a white slab on the dark page. */
[data-theme="dark"] pre.mermaid {
  background: #1b1533 !important;
  border-color: #3a2c63 !important;
  box-shadow: none !important;
}

/* Diagrams render at natural size (useMaxWidth is off) so type stays the
   same across figures. A diagram wider than the column scrolls inside the
   block rather than shrinking its labels to nothing; click-to-zoom covers
   the rest. */
/* Natural size up to the column width, then scale down proportionally.
   A diagram wider than the column would otherwise be clipped, and
   horizontal scrolling is worse than a slightly smaller figure for the
   dense ones. Click-to-zoom covers reading them at full size. */
pre.mermaid svg { height: auto !important; max-width: 100%; }

/* Node outlines at 1px disappear against the fill at this size. */
pre.mermaid svg .node rect,
pre.mermaid svg .node circle,
pre.mermaid svg .node polygon,
pre.mermaid svg .actor { stroke-width: 1.6px !important; }

pre.mermaid svg .messageText,
pre.mermaid svg .edgeLabel { font-weight: 500; }

/* ---- Sidebar ---- */
.sidebar { background: transparent !important; }

.widget {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 1.4em 1.5em !important;
  margin-bottom: 1.5em !important;
  box-shadow: var(--shadow-sm) !important;
}

.widget-header { border-bottom: 2px solid var(--border) !important; padding-bottom: 0.6em !important; margin-bottom: 0.9em !important; }

.widget-title {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
}

.widget ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.widget ul li { padding: 0.3em 0 !important; border-bottom: 1px solid var(--border) !important; }
.widget ul li:last-child { border-bottom: none !important; }

.widget ul li a {
  color: var(--text) !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  font-family: var(--font) !important;
}

.widget ul li a:hover { color: var(--primary) !important; }

/* ---- Search widget ---- */
#search form {
  display: flex;
  gap: 0.5em;
}

#search input[type="text"] {
  flex: 1;
  padding: 0.5em 0.75em;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font);
  font-size: 0.875rem;
  color: var(--text);
  background: var(--bg);
  outline: none;
  transition: border-color 0.15s;
}

#search input[type="text"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124, 58, 237,0.15); }

#search button {
  padding: 0.5em 0.85em;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background 0.15s;
}

#search button:hover { background: var(--primary-dark); }

#search-results {
  margin-top: 0.75em;
}

#search-results a {
  display: block;
  padding: 0.4em 0;
  color: var(--primary) !important;
  font-size: 0.85rem;
  text-decoration: none !important;
  border-bottom: 1px solid var(--border);
}

#search-results a:last-child { border-bottom: none; }
#search-results a:hover { color: var(--primary-dark) !important; text-decoration: underline !important; }

/* ---- Tag cloud ---- */
.tagcloud { display: flex; flex-wrap: wrap; gap: 0.4em; }

.tag-cloud-link {
  display: inline-block !important;
  background: #f1f5f9 !important;
  color: var(--dark-3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 0.2em 0.7em !important;
  font-size: 0.78rem !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
}

.tag-cloud-link:hover {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* ---- Kill all theme red (#ee3333) across the board ---- */
a:link, a:visited { color: var(--primary); }
a:hover, a:active { color: var(--primary-dark); }

.site-title a:hover,
.site-title a:active { color: var(--primary-light) !important; }

/* Post navigation prev/next */
.post-navigation {
  border-top: 1px solid var(--border) !important;
  margin-top: 2em !important;
  padding-top: 1.5em !important;
}

.post-navigation .nav-links .nav-previous a,
.post-navigation .nav-links .nav-next a {
  color: var(--primary) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}

.post-navigation .nav-links .nav-previous a:hover,
.post-navigation .nav-links .nav-next a:hover {
  color: var(--primary-dark) !important;
}

/* Pagination */
.pagination a:hover,
.pagination a:active,
.pagination .current {
  background: var(--primary) !important;
}

/* Widget title links */
.widget-title a:link,
.widget-title a:visited { color: var(--text-muted) !important; }
.widget-title a:hover,
.widget-title a:active  { color: var(--primary) !important; }

/* ---- Reading time ---- */
.meta-reading-time {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: normal;
}

.meta-reading-time::before { content: '·'; margin: 0 0.4em; color: var(--border); }

/* ---- Back to top button ---- */
#scrollTopBtn {
  position: fixed !important;
  bottom: 2em !important;
  right: 2em !important;
  z-index: 999 !important;
  display: none;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237,0.4) !important;
  transition: background 0.15s, transform 0.15s !important;
}

#scrollTopBtn:hover { background: var(--primary-dark) !important; transform: translateY(-3px) !important; }

/* ---- Mobile navigation ---- */
@media (max-width: 60em) {
  .main-navigation-toggle {
    background: transparent !important;
    color: #cbd5e1 !important;
    font-family: var(--font) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 0.8em 1.2em !important;
    border: none !important;
    cursor: pointer !important;
  }

  .main-navigation-toggle:hover { color: #f5f3ff !important; }

  .main-navigation-toggle.active { color: var(--primary-light) !important; }

  .main-navigation-menu {
    background: var(--dark) !important;
  }

  .main-navigation-menu a {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    border-left: none !important;
  }

  .nav-rss { display: none !important; }
}

/* ---- 404 page ---- */
.error-404-wrap {
  text-align: center;
  padding: 5em 2em;
  max-width: 540px;
  margin: 0 auto;
}

.error-404-code {
  font-size: 7rem;
  font-weight: 800;
  color: var(--border);
  line-height: 1;
  letter-spacing: -4px;
}

.error-404-title {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  margin: 0.25em 0 0.5em !important;
}

.error-404-text {
  color: var(--text-muted);
  margin-bottom: 2em;
}

.error-404-btn {
  display: inline-block;
  padding: 0.65em 1.75em;
  background: var(--primary);
  color: #fff !important;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none !important;
  transition: background 0.15s;
}

.error-404-btn:hover { background: var(--primary-dark) !important; }

/* ---- RSS nav icon ---- */
.nav-rss a {
  color: #f97316 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

.nav-rss a:hover { color: #ea580c !important; background: rgba(249,115,22,0.1) !important; }

/* ---- RSS sidebar widget ---- */
.rss-subscribe-btn {
  display: flex !important;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1em !important;
  background: #fff7ed !important;
  color: #f97316 !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 6px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
}

.rss-subscribe-btn:hover {
  background: #f97316 !important;
  color: #fff !important;
  border-color: #f97316 !important;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--dark) !important;
  color: #94a3b8 !important;
  padding: 2em 0 !important;
  text-align: center !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  margin-top: 3em !important;
}

.site-footer a { color: var(--primary-light) !important; text-decoration: none !important; }
.site-footer a:hover { text-decoration: underline !important; }
.credit-link { font-size: 0.85rem !important; font-family: var(--font) !important; }
.footer-rss { margin-left: 1.5em; font-size: 0.85rem; }
.footer-rss a { color: #fb923c !important; }
.site-info { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5em; }

/* ================================================================
   ENHANCEMENTS
   ================================================================ */

/* ---- Reading progress bar ---- */
#reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ---- Copy code button ---- */
.copy-btn {
  position: absolute !important;
  top: 0.6em;
  right: 0.6em;
  padding: 0.3em 0.55em;
  background: rgba(255,255,255,0.08);
  color: #94a3b8;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  font-size: 0.78rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: rgba(255,255,255,0.16) !important; color: #f5f3ff !important; }
.copy-btn.copied { color: #4ade80 !important; border-color: #4ade80 !important; }

/* ---- Social share bar ---- */
.social-share-bar {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
  margin: 1.25em 0;
  padding: 1em 1.25em;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.share-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 0.9em;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: opacity 0.15s;
}

.share-btn:hover { opacity: 0.85; }
.share-linkedin { background: #0a66c2; color: #fff !important; }
.share-twitter  { background: #000;    color: #fff !important; }
.share-reddit   { background: #ff4500; color: #fff !important; }

/* ---- TOC ---- */
.toc-widget {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 1.25em 1.5em;
  margin: 1.5em 0 2em;
}

.toc-title {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--text-muted) !important;
  margin: 0 0 0.75em !important;
}

.toc-links nav ul {
  margin: 0;
  padding-left: 1.1em;
}

.toc-links nav ul li { margin: 0.3em 0; }

.toc-links nav a {
  color: var(--dark-3) !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
}

.toc-links nav a:hover { color: var(--primary) !important; }

/* ---- Author bio ---- */
.author-bio {
  display: flex;
  align-items: center;
  gap: 1.5em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5em;
  margin: 2.5em 0 1.5em;
  box-shadow: var(--shadow-sm);
}

.author-bio-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--primary-light);
}

.author-bio-name {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.3em !important;
  color: var(--dark) !important;
}

.author-bio-desc {
  font-size: 0.88rem !important;
  color: var(--text-muted) !important;
  margin: 0 0 0.75em !important;
  line-height: 1.6 !important;
}

.author-bio-links {
  display: flex;
  gap: 0.75em;
  flex-wrap: wrap;
}

.author-bio-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  text-decoration: none !important;
  padding: 0.3em 0.75em;
  border: 1.5px solid var(--primary);
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
}

.author-bio-links a:hover {
  background: var(--primary) !important;
  color: #fff !important;
}

/* ---- Newsletter box ---- */
.newsletter-box {
  text-align: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: var(--radius);
  padding: 2.5em 2em;
  margin: 1.5em 0 2em;
  color: #f5f3ff;
}

.newsletter-icon { font-size: 2rem; color: var(--primary-light); margin-bottom: 0.5em; }

.newsletter-title {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #f5f3ff !important;
  margin: 0 0 0.5em !important;
}

.newsletter-desc {
  color: #94a3b8 !important;
  font-size: 0.9rem !important;
  max-width: 480px;
  margin: 0 auto 1.5em !important;
  line-height: 1.7 !important;
}

.newsletter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.75em;
  background: var(--primary);
  color: #fff !important;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none !important;
  transition: background 0.15s;
}

.newsletter-btn:hover { background: var(--primary-dark) !important; }

/* ---- Dark mode ---- */
#dark-mode-toggle {
  float: right;
  margin-top: 0.5em;
  background: rgba(255,255,255,0.08);
  color: #94a3b8;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 0.45em 0.75em;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.15s, color 0.15s;
}

#dark-mode-toggle:hover { background: rgba(255,255,255,0.15); color: #f5f3ff; }

/* ---- Dark mode (user-toggled only, never auto) ---- */
[data-theme="dark"] body {
  background: #0f172a !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .site { background: #0f172a !important; }

[data-theme="dark"] .type-post,
[data-theme="dark"] .hentry {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .entry-title a:link,
[data-theme="dark"] .entry-title a:visited { color: #f5f3ff !important; }

[data-theme="dark"] .entry-content { color: #cbd5e1 !important; }

[data-theme="dark"] .entry-content h2,
[data-theme="dark"] .entry-content h3,
[data-theme="dark"] .entry-content h4 { color: #f5f3ff !important; }

[data-theme="dark"] .entry-content h2 { border-color: #334155 !important; }

[data-theme="dark"] .entry-content a { color: var(--primary-light) !important; }

[data-theme="dark"] code,
[data-theme="dark"] kbd { background: #0f172a !important; color: #7dd3fc !important; }

[data-theme="dark"] blockquote { background: #33235c !important; color: #bfdbfe !important; }

[data-theme="dark"] .widget {
  background: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .widget ul li { border-color: #334155 !important; }
[data-theme="dark"] .widget ul li a { color: #cbd5e1 !important; }

[data-theme="dark"] .author-bio  { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .author-bio-name { color: #f5f3ff !important; }
[data-theme="dark"] .author-bio-desc { color: #94a3b8 !important; }

[data-theme="dark"] .toc-widget  { background: #1e293b !important; border-color: var(--primary) !important; }
[data-theme="dark"] .toc-links nav a { color: #94a3b8 !important; }

[data-theme="dark"] .social-share-bar { background: #1e293b !important; border-color: #334155 !important; }

[data-theme="dark"] .entry-content table th { background: #0f172a !important; }
[data-theme="dark"] .entry-content table td { border-color: #334155 !important; color: #cbd5e1 !important; }
[data-theme="dark"] .entry-content table tr:nth-child(even) td { background: #162032 !important; }
[data-theme="dark"] .entry-content table tr:hover td { background: #33235c !important; }

[data-theme="dark"] .post-navigation .nav-links .nav-previous a,
[data-theme="dark"] .post-navigation .nav-links .nav-next a { color: var(--primary-light) !important; }

[data-theme="dark"] .newsletter-box { border: 1px solid #334155; }

[data-theme="dark"] #search input[type="text"] {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] hr { border-color: #334155 !important; }
[data-theme="dark"] .more-link,
[data-theme="dark"] .more-link:link,
[data-theme="dark"] .more-link:visited { color: var(--primary-light) !important; border-color: var(--primary-light) !important; }

/* ---- Certification cards ---- */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1em;
  margin: 1.5em 0;
}

.cert-card {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1em 1.25em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}

.cert-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.cert-logo {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
}

.cert-logo-hashicorp { background: linear-gradient(135deg, #5c4ee5, #7c3aed); }
.cert-logo-aws       { background: linear-gradient(135deg, #f59e0b, #d97706); font-size: 0.65rem; }
.cert-logo-cncf      { background: linear-gradient(135deg, #7c3aed, #6d28d9); font-size: 0.6rem; }
.cert-logo-docker    { background: linear-gradient(135deg, #2496ed, #1d6fba); font-size: 0.6rem; }

.cert-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.35;
}

.cert-issuer {
  font-size: 0.78rem;
  color: var(--primary);
  font-weight: 500;
  margin-top: 0.15em;
}

.cert-date {
  font-size: 0.73rem;
  color: var(--text-muted);
  margin-top: 0.1em;
}

[data-theme="dark"] .cert-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .cert-name { color: #f5f3ff !important; }

/* ---- Homepage hero ---- */
.hero-card {
  display: flex;
  align-items: center;
  gap: 1.5em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2em;
  margin-bottom: 2em;
  box-shadow: var(--shadow-sm);
}

.hero-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--primary-light);
}

.hero-name {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.4em !important;
  color: var(--dark) !important;
}

.hero-bio {
  font-size: 0.92rem !important;
  color: var(--text-muted) !important;
  margin: 0 0 0.9em !important;
  line-height: 1.65 !important;
}

.hero-links {
  display: flex;
  gap: 0.6em;
  flex-wrap: wrap;
}

.hero-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.35em 0.9em;
  border-radius: 6px;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: #f5f3ff;
  color: var(--primary) !important;
  border: 1px solid #bae6fd;
  transition: background 0.15s;
}

.hero-links a:hover { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }

.posts-section-title {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--text-muted) !important;
  margin: 0 0 1em !important;
  padding: 0 2em !important;
}

/* ---- Related posts ---- */
.related-posts {
  margin: 2em 0;
  padding: 1.5em 2em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.related-title {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  color: var(--text-muted) !important;
  margin: 0 0 1em !important;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75em;
}

.related-card {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  padding: 0.9em 1em;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.related-card:hover { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(124, 58, 237,0.1); }

.related-card-meta { font-size: 0.72rem; color: var(--text-muted); }
.related-card-title { font-size: 0.88rem; font-weight: 600; color: var(--dark) !important; line-height: 1.3; }
.related-card-cat { font-size: 0.72rem; color: var(--primary); font-weight: 500; margin-top: 0.1em; }

/* ---- Dark mode: hero + related ---- */
[data-theme="dark"] .hero-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .hero-name { color: #f5f3ff !important; }
[data-theme="dark"] .hero-links a { background: #0f172a !important; border-color: #334155 !important; }
[data-theme="dark"] .related-posts { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .related-card { background: #0f172a !important; border-color: #334155 !important; }
[data-theme="dark"] .related-card-title { color: #f5f3ff !important; }
[data-theme="dark"] .cert-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .cert-name { color: #f5f3ff !important; }

/* ---- Cert card as link ---- */
a.cert-card {
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
}

a.cert-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237,0.12), var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

.cert-verify {
  font-size: 0.72rem;
  color: var(--primary);
  font-weight: 500;
  margin-top: 0.35em;
  opacity: 0;
  transition: opacity 0.15s;
}

a.cert-card:hover .cert-verify { opacity: 1; }

/* ---- Nav post count badge ---- */
.nav-count {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.05em 0.45em;
  background: rgba(255,255,255,0.15);
  color: #94a3b8;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: middle;
  line-height: 1.6;
}

.current-menu-item .nav-count { background: rgba(167, 139, 250,0.2); color: var(--primary-light); }

/* ---- Category / Tag list page header ---- */
.content-archive .archive-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 1.25em 1.5em;
  margin-bottom: 1.75em;
  box-shadow: var(--shadow-sm);
}

.content-archive .archive-header h1,
.content-archive .page-title {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  margin: 0 0 0.2em !important;
}

.content-archive .archive-header .archive-description,
.content-archive .taxonomy-description {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin: 0;
}

[data-theme="dark"] .archive-header { background: #1e293b !important; border-color: #334155 !important; }

/* ---- Post cover image (listing card + article hero) ---- */
/* Negative margins bleed the banner to the card edges; they mirror the
   1.75em/2em padding on .type-post / .hentry above. */
.post-card-img-link,
.post-hero-img-link {
  display: block;
  margin: -1.75em -2em 1.5em;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--border);
}

.post-card-img,
.post-hero-img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s;
}

/* Covers are designed graphics, not photos: show the whole 2.5:1 artwork
   rather than cropping the chapter chip and strapline off the edges. */
.post-card-img,
.post-hero-img { aspect-ratio: 5 / 2; height: auto; }

.type-post:hover .post-card-img { transform: scale(1.03); }

/* Generated fallback banner for posts with no cover image in front matter.
   --cover-a / --cover-b are set inline by partials/post-cover.html, seeded
   from a hash of the post title so each post keeps a stable colourway. */
.post-cover--auto {
  background: linear-gradient(135deg, var(--cover-a, #7c3aed), var(--cover-b, #6366f1));
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 1.25em 1.75em;
  text-align: center;
}

.post-cover--auto::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,0.22), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(255,255,255,0.14), transparent 48%);
  pointer-events: none;
}

.post-cover-title {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-shadow: 0 1px 12px rgba(15, 23, 42, 0.28);
  max-width: 26ch;
}

.post-hero-img.post-cover--auto .post-cover-title { font-size: 1.85rem; max-width: 30ch; }

[data-theme="dark"] .post-card-img-link,
[data-theme="dark"] .post-hero-img-link { background: #334155; }

@media (max-width: 768px) {
  .post-card-img-link,
  .post-hero-img-link { margin: -1.75em -2em 1.25em; }
  .post-cover-title { font-size: 1.15rem; }
  .post-hero-img.post-cover--auto .post-cover-title { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .post-card-img, .post-hero-img { transition: none; }
  .type-post:hover .post-card-img { transform: none; }
}

/* ---- Experience list ---- */
.experience-list { margin: 1em 0; }

.experience-item {
  padding: 1em 1.25em;
  border-left: 3px solid var(--border);
  margin-bottom: 0.75em;
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s;
}

.experience-item:hover { border-left-color: var(--primary); }

.exp-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--dark);
}

.exp-company {
  font-size: 0.85rem;
  color: var(--primary);
  margin-top: 0.15em;
}

.exp-period {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.1em;
}

[data-theme="dark"] .experience-item { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .exp-title { color: #f5f3ff !important; }

/* ================================================================
   TUTORIAL SERIES STYLES
   ================================================================ */

/* ---- Dropdown nav sub-menu polish ---- */
.main-navigation-menu ul {
  border-radius: 0 0 var(--radius) var(--radius) !important;
  border-top: 2px solid var(--primary) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
}

.main-navigation-menu ul a {
  font-size: 0.855rem !important;
  padding: 0.75em 1.25em !important;
  color: #cbd5e1 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.main-navigation-menu ul a:hover {
  color: #f5f3ff !important;
  background: rgba(124, 58, 237,0.12) !important;
}

/* ---- Series header banner ---- */
.series-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid #334155;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 1em 1.5em;
  margin-bottom: 1.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
}

.series-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--primary-light);
}

.series-label a {
  color: var(--primary-light) !important;
  text-decoration: none !important;
}

.series-label a:hover { text-decoration: underline !important; }

.series-progress {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.series-part {
  font-size: 0.8rem;
  color: #94a3b8;
  white-space: nowrap;
}

.series-progress-bar {
  width: 120px;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  overflow: hidden;
}

.series-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* ---- Tutorial index page ---- */
.tutorial-index {
  font-size: 0.95rem !important;
}

.tutorial-index h2 {
  font-size: 1.1rem !important;
  margin-top: 1.75em !important;
  color: var(--dark) !important;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3em;
}

.tutorial-index ol {
  padding-left: 1.5em;
  margin: 0.5em 0 1em;
}

.tutorial-index ol li {
  margin: 0.35em 0;
  font-size: 0.9rem;
}

.tutorial-index ol li a {
  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 500;
}

.tutorial-index ol li a:hover { text-decoration: underline !important; }

.tutorial-description {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0.5em 0 1.5em;
  line-height: 1.7;
}

/* ---- Dark mode: tutorial components ---- */
[data-theme="dark"] .tutorial-index h2 { color: #f5f3ff !important; border-color: #334155 !important; }


/* ==========================================================================
   Diagram design system
   Inline SVG diagrams in posts hardcoded ~78 one-off colours and assumed a
   light page, so they glared in dark mode. Diagrams now paint from these
   tokens only; each has a light value and a dark override below.
   ========================================================================== */
:root {
  --dg-panel:  #f8fafc;  --dg-surface: #ffffff;
  --dg-border: #e2e8f0;  --dg-border2: #cbd5e1;
  --dg-text:   #1e293b;  --dg-muted:   #64748b;
  --dg-muted2: #475569;  --dg-faint:   #94a3b8;

  --dg-blue:   #7c3aed;  --dg-blue-bg:   #f5f3ff;  --dg-blue-br:   #bfdbfe;  --dg-blue-tx:   #1e40af;
  --dg-green:  #10b981;  --dg-green-bg:  #f0fdf4;  --dg-green-br:  #86efac;  --dg-green-tx:  #166534;
  --dg-purple: #8b5cf6;  --dg-purple-bg: #f5f3ff;  --dg-purple-br: #ddd6fe;  --dg-purple-tx: #5b21b6;
  --dg-orange: #f97316;  --dg-orange-bg: #fff7ed;  --dg-orange-br: #fed7aa;  --dg-orange-tx: #b45309;
  --dg-red:    #ef4444;  --dg-red-bg:    #fef2f2;  --dg-red-br:    #fca5a5;  --dg-red-tx:    #b91c1c;
  --dg-teal:   #14b8a6;  --dg-teal-bg:   #f0fdfa;  --dg-teal-br:   #99f6e4;  --dg-teal-tx:   #0e7490;
}

:root[data-theme="dark"] {
  --dg-panel:  #171233;  --dg-surface: #1b1533;
  --dg-border: #3a2c63;  --dg-border2: #4c3a75;
  --dg-text:   #e2e8f0;  --dg-muted:   #94a3b8;
  --dg-muted2: #cbd5e1;  --dg-faint:   #64748b;

  --dg-blue-bg:   #17263f;  --dg-blue-br:   #2b4a7a;  --dg-blue-tx:   #93c5fd;
  --dg-green-bg:  #10291f;  --dg-green-br:  #1d5c40;  --dg-green-tx:  #6ee7b7;
  --dg-purple-bg: #1e1b38;  --dg-purple-br: #4c3d8a;  --dg-purple-tx: #c4b5fd;
  --dg-orange-bg: #2a1d10;  --dg-orange-br: #7c4a1d;  --dg-orange-tx: #fcd34d;
  --dg-red-bg:    #2b1418;  --dg-red-br:    #7f2733;  --dg-red-tx:    #fca5a5;
  --dg-teal-bg:   #0d2a2c;  --dg-teal-br:   #1c5f5e;  --dg-teal-tx:   #5eead4;
}

/* Wide diagrams scroll inside their own box; the page never scrolls sideways. */
.diagram {
  margin: 1.75em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.diagram svg { display: block; width: 100%; min-width: 620px; height: auto; }
.entry-content svg text { font-family: var(--font); }

/* ==========================================================================
   About page
   The About page uses layouts/page/single.html, which drops the post chrome
   (generated cover, date, reading time, share buttons). The profile header
   below replaces the cover image.
   ========================================================================== */

.static-page .entry-content > h2:first-child { margin-top: 0; }

.about-hero {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 2rem;
  margin: 0 0 1.75rem;
  background: linear-gradient(135deg, #0f172a 0%, #33235c 55%, #075985 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.about-avatar {
  width: 132px;
  height: 132px;
  flex: 0 0 132px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}

.about-hero-body { min-width: 0; }

.about-eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-light);
}

.about-name {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
}

.about-role {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #cbd5e1;
}

.about-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.about-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #e2e8f0;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.about-links a:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Stat row --------------------------------------------------------------- */

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 0 0 2rem;
}

.about-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 1rem 0.5rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.about-stat-num { font-size: 1.6rem; font-weight: 700; color: var(--primary-dark); line-height: 1.1; }
.about-stat-label { font-size: 0.74rem; color: var(--text-muted); letter-spacing: 0.02em; }

/* Skill chips ------------------------------------------------------------ */

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.5rem 0 1.35rem; }

.chips span {
  padding: 0.32rem 0.75rem;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--primary-dark);
  background: rgba(124, 58, 237,0.09);
  border: 1px solid rgba(124, 58, 237,0.22);
  border-radius: 999px;
}

/* Certifications --------------------------------------------------------- */

.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 0.65rem;
  margin: 1rem 0 1.75rem;
}

.cert {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  font-size: 0.88rem;
  line-height: 1.4;
}

.cert i { color: var(--primary); font-size: 1.05rem; flex: 0 0 auto; }

/* Call to action --------------------------------------------------------- */

.about-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 0.5rem; }

.about-cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
  transition: filter 0.15s ease, background 0.15s ease;
}

/* .entry-content a rules in this file carry !important, so CTA and hero link
   colours are scoped through .entry-content to outrank them in both themes. */
.entry-content .about-cta-primary { background: var(--primary); color: #fff !important; border: 1px solid var(--primary); }
.entry-content .about-cta a,
.entry-content .about-links a { text-decoration: none !important; }
.entry-content .about-links a { color: #e2e8f0 !important; }
.entry-content .about-links a:hover { color: #fff !important; }
.about-cta-primary:hover { filter: brightness(1.08); }

.entry-content .about-cta-secondary {
  background: var(--surface);
  color: var(--primary-dark) !important;
  border: 1px solid var(--border);
}

.about-cta-secondary:hover { background: rgba(124, 58, 237,0.08); border-color: var(--primary); }

/* Dark theme ------------------------------------------------------------- */

[data-theme="dark"] .about-stat,
[data-theme="dark"] .cert,
[data-theme="dark"] .about-cta-secondary { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .cert { border-left-color: var(--primary) !important; }
[data-theme="dark"] .about-stat-num { color: var(--primary-light) !important; }
[data-theme="dark"] .chips span { color: var(--primary-light) !important; background: rgba(167, 139, 250,0.12) !important; border-color: rgba(167, 139, 250,0.28) !important; }
[data-theme="dark"] .entry-content .about-cta-secondary { color: var(--primary-light) !important; }
[data-theme="dark"] .entry-content .about-cta-primary { color: #fff !important; }
[data-theme="dark"] .entry-content .about-links a { color: #e2e8f0 !important; }

/* Small screens ---------------------------------------------------------- */

@media only screen and (max-width: 40em) {
  .about-hero { flex-direction: column; text-align: center; padding: 1.5rem 1.15rem; gap: 1.1rem; }
  .about-links { justify-content: center; }
  .about-name { font-size: 1.6rem; }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .about-cta a { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Interactive widgets

   One block per widget, keyed by a short class prefix (e.g. `rag-`, `tok-`),
   named after the article that owns it. Each must define its dark variant
   under [data-theme="dark"] and collapse to one column under 40em.
   ========================================================================== */

/* ==========================================================================
   Text-to-speech player (layouts/partials/text-to-speech.html)
   Built on the site's design tokens so it adapts to light and dark like
   every other component, rather than being a fixed dark slab.
   ========================================================================== */

.tts {
  margin: 0 0 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.tts-main { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; }

/* The stop button and the play/pause icons are toggled with the `hidden`
   attribute, which a `display` rule would otherwise override. */
.tts [hidden] { display: none !important; }

.tts-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  color: var(--primary-dark);
  background: rgba(124, 58, 237, 0.11);
}

.tts-text { flex: 1; min-width: 0; }

.tts-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

.tts-status {
  margin-top: 1px;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.tts-actions { display: flex; align-items: center; gap: 0.5rem; }

/* Segmented speed control, matching the interactive widgets' button style */
.tts-speed { display: flex; gap: 2px; padding: 2px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; }

.tts-speed button {
  padding: 0.22rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.tts-speed button:hover { color: var(--primary-dark); }
.tts-speed button.on { color: #fff; background: var(--primary); font-weight: 600; }

.tts-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tts-stop:hover { color: var(--text); border-color: var(--text-muted); }

.tts-play {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.48rem 1rem;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.tts-play:hover { filter: brightness(1.08); }
.tts.is-playing .tts-play { background: #16a34a; border-color: #16a34a; }

.tts-track { height: 2px; background: var(--border); }
.tts-fill { height: 2px; width: 0; background: var(--primary); transition: width 0.35s linear; }
.tts.is-playing .tts-fill { background: #16a34a; }

/* The paragraph currently being read */
.tts-reading {
  background: rgba(124, 58, 237, 0.08) !important;
  box-shadow: -3px 0 0 var(--primary) !important;
  border-radius: 0 4px 4px 0 !important;
  transition: background 0.3s ease !important;
}

[data-theme="dark"] .tts { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .tts-speed,
[data-theme="dark"] .tts-stop { background: #0f172a !important; border-color: #334155 !important; }
[data-theme="dark"] .tts-title { color: #e2e8f0 !important; }
[data-theme="dark"] .tts-badge { color: var(--primary-light) !important; background: rgba(167, 139, 250, 0.14) !important; }
[data-theme="dark"] .tts-speed button:hover { color: var(--primary-light) !important; }
[data-theme="dark"] .tts-speed button.on { color: #fff !important; background: var(--primary) !important; }
[data-theme="dark"] .tts-track { background: #334155 !important; }
[data-theme="dark"] .tts-reading { background: rgba(167, 139, 250, 0.12) !important; }

@media only screen and (max-width: 40em) {
  .tts-main { flex-wrap: wrap; gap: 0.6rem; padding: 0.75rem 0.85rem; }
  .tts-text { flex: 1 1 60%; }
  /* Controls move to their own row. The speed group takes the slack and its
     buttons share it evenly, so the Play pill always fits inside the card. */
  .tts-actions { flex: 1 1 100%; min-width: 0; gap: 0.45rem; }
  .tts-speed { flex: 1 1 auto; min-width: 0; }
  .tts-speed button { flex: 1 1 0; min-width: 0; padding: 0.24rem 0.2rem; font-size: 0.66rem; }
  .tts-stop, .tts-play { flex: 0 0 auto; }
}

/* ==========================================================================
   Series navigation (layouts/partials/series-badge.html, series-nav.html)
   ========================================================================== */

.series-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0.3rem 0.7rem 0.3rem 0.55rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-decoration: none;
  background: rgba(124, 58, 237, 0.09);
  border: 1px solid rgba(124, 58, 237, 0.28);
  border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.series-badge:hover { background: rgba(124, 58, 237, 0.16); border-color: var(--primary); }
.series-badge-vol { color: var(--primary-dark); font-weight: 700; }

/* Divider between volume and chapter, drawn rather than typed so it stays
   put when the badge wraps on a narrow screen. */
.series-badge-ch {
  padding-left: 0.55rem;
  color: var(--text-muted);
  border-left: 1px solid rgba(124, 58, 237, 0.3);
}

.series-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin: 2.25rem 0 0;
}

.series-nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1.05rem;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.series-nav-link:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Placeholder that holds the column open at the first and last chapter, so a
   lone "Next" stays in the right-hand half instead of sliding left. */
.series-nav-link.is-empty { background: none; border: none; box-shadow: none; }
.series-nav-link.is-empty:hover { transform: none; }

.series-nav-next { text-align: right; }
.series-nav-dir { font-size: 0.72rem; font-weight: 600; color: var(--primary-dark); }
.series-nav-ch { font-family: var(--mono); font-size: 0.68rem; color: var(--text-muted); }
.series-nav-title { font-size: 0.92rem; font-weight: 600; line-height: 1.3; color: var(--text); }

[data-theme="dark"] .series-badge { background: rgba(167, 139, 250, 0.1) !important; border-color: rgba(167, 139, 250, 0.3) !important; }
[data-theme="dark"] .series-badge-vol { color: var(--primary-light) !important; }
[data-theme="dark"] .series-nav-link { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .series-nav-link:hover { border-color: var(--primary) !important; }
[data-theme="dark"] .series-nav-dir { color: var(--primary-light) !important; }
[data-theme="dark"] .series-nav-title { color: #e2e8f0 !important; }

@media only screen and (max-width: 40em) {
  .series-nav { grid-template-columns: 1fr; }
  .series-nav-link.is-empty { display: none; }
  .series-nav-next { text-align: left; }
}

/* ==========================================================================
   Diagram zoom (static/assets/js/enhancements.js)
   ========================================================================== */

/* Affordance. Drawn with ::after rather than an appended element because
   mermaid replaces each block's innerHTML when it renders and again on every
   dark-mode toggle — a child node would not survive. */
pre.mermaid { position: relative; cursor: zoom-in; }

pre.mermaid::after {
  content: "Expand";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.2rem 0.55rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

pre.mermaid:hover::after { opacity: 1; }

/* Touch devices have no hover, so the chip would never appear. */
@media (hover: none) {
  pre.mermaid::after { opacity: 0.85; }
}

body.dz-open { overflow: hidden; }

.dz-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(3px);
}

.dz-overlay[hidden] { display: none !important; }

.dz-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  background: rgba(15, 23, 42, 0.6);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.dz-btn {
  min-width: 34px;
  height: 30px;
  padding: 0 0.6rem;
  font-family: inherit;
  font-size: 0.82rem;
  color: #e2e8f0;
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 7px;
  cursor: pointer;
}

.dz-btn:hover { background: rgba(148, 163, 184, 0.26); }
.dz-close { margin-left: auto; font-size: 1.1rem; line-height: 1; }

.dz-level {
  min-width: 3.4em;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: #94a3b8;
  text-align: center;
}

.dz-stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: grab;
  touch-action: none;   /* we handle pinch and drag ourselves */
}

.dz-stage:active { cursor: grabbing; }

.dz-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* The diagrams are drawn for a light page, so they keep their own ground
   inside the overlay instead of sitting on bare dark. The ground goes on the
   wrapper, not the <svg> — padding on a replaced element fights the explicit
   width the script sets. */
.dz-inner {
  background: #fff;
  border-radius: 8px;
  padding: 1.25rem;
}

.dz-inner svg { display: block; max-width: none; }

[data-theme="dark"] .dz-inner { background: #1b1533; }

.dz-hint {
  padding: 0.5rem 0.8rem 0.7rem;
  font-size: 0.72rem;
  color: #94a3b8;
  text-align: center;
}

@media only screen and (max-width: 40em) {
  .dz-hint { font-size: 0.66rem; }
  .dz-inner svg { padding: 0.6rem; }
}

/* ---- Temperature demo (posts/2026/hello-transformers) — example widget ---- */
.tok-demo {
  margin: 1.75rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.tok-row { display: flex; align-items: center; gap: 0.85rem; }
.tok-row label { font-size: 0.85rem; font-weight: 600; }
.tok-row input[type="range"] { flex: 1; accent-color: var(--primary); }
.tok-row output { min-width: 3.2em; font-family: var(--mono); font-size: 0.85rem; color: var(--primary-dark); }

.tok-bars { margin-top: 0.9rem; display: grid; gap: 0.4rem; }
.tok-bar { display: grid; grid-template-columns: 4.5em 1fr 3.6em; align-items: center; gap: 0.6rem; }
.tok-word { font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted); }
.tok-track { height: 16px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.tok-fill { display: block; height: 16px; background: var(--primary); transition: width 0.15s ease; }
.tok-pct { font-family: var(--mono); font-size: 0.74rem; color: var(--text-muted); text-align: right; }
.tok-note { margin: 0.8rem 0 0; font-size: 0.82rem; color: var(--text-muted); }

[data-theme="dark"] .tok-demo { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .tok-track { background: #0f172a !important; }

@media only screen and (max-width: 40em) {
  .tok-bar { grid-template-columns: 4em 1fr 3.2em; }
  .tok-row { flex-wrap: wrap; }
}

/* ---- Agentic loop walkthrough (posts/2026/cc-01-what-claude-code-is) ---- */
.al-demo {
  margin: 1.75rem 0;
  padding: 1.1rem 1.25rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.al-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.al-task { font-size: 0.85rem; color: var(--text-muted); }
.al-phases { display: flex; gap: 0.35rem; }

.al-phase {
  padding: 0.22rem 0.6rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.al-phase.on { color: #fff; background: var(--primary); border-color: var(--primary); }

.al-log { margin: 0.9rem 0 0; padding: 0; list-style: none; min-height: 2.5rem; }

.al-item {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.2rem 0.75rem;
  padding: 0.5rem 0 0.5rem 0.75rem;
  border-left: 3px solid var(--border);
}

/* The left rule colour is the phase, so the shape of the loop is visible in
   the margin without reading a word of it. */
.al-item.al-gather { border-left-color: #38bdf8; }
.al-item.al-act    { border-left-color: var(--primary); }
.al-item.al-verify { border-left-color: #16a34a; }

.al-tool {
  grid-row: 1;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--primary-dark);
  background: rgba(124, 58, 237, 0.1);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  text-align: center;
}

.al-text { grid-row: 1; font-size: 0.88rem; color: var(--text); }
.al-note { grid-column: 2; font-size: 0.8rem; color: var(--text-muted); }

.al-controls { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; }

.al-btn {
  padding: 0.4rem 0.85rem;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.al-btn:hover:not(:disabled) { border-color: var(--primary); }
.al-btn-primary { color: #fff; background: var(--primary); border-color: var(--primary); }
.al-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.al-btn:disabled { opacity: 0.5; cursor: default; }
.al-count { font-family: var(--mono); font-size: 0.74rem; color: var(--text-muted); }

[data-theme="dark"] .al-demo { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .al-head { border-color: #334155 !important; }
[data-theme="dark"] .al-phase { background: #0f172a !important; border-color: #334155 !important; }
[data-theme="dark"] .al-phase.on { color: #fff !important; background: var(--primary) !important; border-color: var(--primary) !important; }
[data-theme="dark"] .al-tool { color: var(--primary-light) !important; background: rgba(167, 139, 250, 0.16) !important; }
[data-theme="dark"] .al-text { color: #e2e8f0; }
[data-theme="dark"] .al-btn { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; }
[data-theme="dark"] .al-btn-primary { color: #fff !important; background: var(--primary) !important; border-color: var(--primary) !important; }

@media only screen and (max-width: 40em) {
  .al-head { flex-direction: column; align-items: flex-start; }
  .al-phases { flex-wrap: wrap; }
  /* One column on mobile, so the explicit row/column placement from the
     two-column layout has to be released or the chip and the label land in
     the same cell. */
  .al-item { grid-template-columns: 1fr; }
  .al-tool, .al-text, .al-note { grid-row: auto; grid-column: 1; }
  .al-tool { justify-self: start; }
}

/* ---- Channel sorter (posts/2026/cc-02-three-ways-to-talk) ---- */
.sorter {
  margin: 1.75rem 0;
  padding: 1.1rem 1.25rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.ct-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.ct-q { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
.ct-score { font-family: var(--mono); font-size: 0.76rem; color: var(--text-muted); }

.ct-item {
  margin: 0.75rem 0 1rem;
  padding: 0.85rem 1rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  word-break: break-word;
}

.ct-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }

.ct-btn {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.5rem;
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ct-btn small { font-size: 0.68rem; font-weight: 400; color: var(--text-muted); }
.ct-btn:hover:not(:disabled) { border-color: var(--primary); }
.ct-btn:disabled { cursor: default; }
.ct-btn.ok { color: #fff; background: #16a34a; border-color: #16a34a; }
.ct-btn.ok small { color: rgba(255,255,255,0.85); }
.ct-btn.no { color: #fff; background: #dc2626; border-color: #dc2626; }
.ct-btn.no small { color: rgba(255,255,255,0.85); }

/* The right answer when you got it wrong — shown, but not celebrated. */
.ct-btn.ok-faint { border-color: #16a34a; box-shadow: inset 0 0 0 1px #16a34a; }

.ct-feedback {
  min-height: 3.2em;
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.ct-feedback.good { color: #15803d; }
.ct-feedback.bad { color: #b91c1c; }

.ct-reset {
  margin-top: 0.3rem;
  padding: 0.3rem 0.7rem;
  font-family: inherit;
  font-size: 0.76rem;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.ct-reset:hover { border-color: var(--primary); color: var(--primary-dark); }

[data-theme="dark"] .sorter { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .ct-item { color: #e2e8f0 !important; background: #0f172a !important; border-color: #334155 !important; }
[data-theme="dark"] .ct-btn { color: #e2e8f0 !important; background: #0f172a !important; border-color: #334155 !important; }
[data-theme="dark"] .ct-btn.ok { color: #fff !important; background: #15803d !important; border-color: #15803d !important; }
[data-theme="dark"] .ct-btn.no { color: #fff !important; background: #b91c1c !important; border-color: #b91c1c !important; }
[data-theme="dark"] .ct-feedback.good { color: #4ade80 !important; }
[data-theme="dark"] .ct-feedback.bad { color: #fca5a5 !important; }
[data-theme="dark"] .ct-reset { color: #94a3b8 !important; border-color: #334155 !important; }

@media only screen and (max-width: 40em) {
  .ct-choices { grid-template-columns: 1fr; }
  .ct-btn { flex-direction: row; align-items: baseline; gap: 0.45rem; }
  .ct-feedback { min-height: 4.5em; }
}

/* ---- Permission mode simulator (posts/2026/cc-03-permission-modes) ---- */
.pm-sim {
  margin: 1.75rem 0;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.pm-modes { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.pm-mode {
  padding: 0.34rem 0.7rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.pm-mode:hover { border-color: var(--primary); }
.pm-mode.on { color: #fff; background: var(--primary); border-color: var(--primary); font-weight: 600; }

.pm-legend { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.85rem 0 0.2rem; opacity: 0.75; }

.pm-pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
}

.pm-runs   { color: #14532d; background: #dcfce7; }
.pm-prompt { color: #854d0e; background: #fef3c7; }
.pm-class  { color: #5b21b6; background: #ede9fe; }
.pm-deny   { color: #991b1b; background: #fee2e2; }

.pm-table { width: 100%; margin: 0.6rem 0 0; border-collapse: collapse; font-size: 0.85rem; }
.pm-table td { padding: 0.5rem 0.5rem 0.5rem 0; border-top: 1px solid var(--border); vertical-align: top; }
.pm-act { width: 15em; }
.pm-act code { font-size: 0.78rem; background: none; padding: 0; color: var(--text); }
.pm-out { width: 6.5em; white-space: nowrap; }
.pm-why { color: var(--text-muted); line-height: 1.45; }

[data-theme="dark"] .pm-sim { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .pm-mode { color: #94a3b8 !important; background: #0f172a !important; border-color: #334155 !important; }
[data-theme="dark"] .pm-mode.on { color: #fff !important; background: var(--primary) !important; border-color: var(--primary) !important; }
[data-theme="dark"] .pm-table td { border-color: #334155; }
[data-theme="dark"] .pm-act code { color: #e2e8f0 !important; }
[data-theme="dark"] .pm-runs   { color: #bbf7d0 !important; background: #14532d !important; }
[data-theme="dark"] .pm-prompt { color: #fde68a !important; background: #713f12 !important; }
[data-theme="dark"] .pm-class  { color: #ddd6fe !important; background: #4c1d95 !important; }
[data-theme="dark"] .pm-deny   { color: #fecaca !important; background: #7f1d1d !important; }

@media only screen and (max-width: 40em) {
  .pm-table, .pm-table tbody, .pm-table tr, .pm-table td { display: block; width: auto; }
  .pm-table tr { padding: 0.6rem 0; border-top: 1px solid var(--border); }
  .pm-table td { border-top: none; padding: 0.1rem 0; }
  .pm-act { width: auto; }
}