/*
 * vrodocs.com — Site Stylesheet
 * ============================================================
 * Single source of truth for all page styles.
 *
 * Usage:
 *   Website (external):  <link rel="stylesheet" href="/assets/css/vrodocs.css">
 *   Self-contained doc:  Embed full contents inside <style> tags in <head>
 *
 * Fonts (always load from CDN before this stylesheet):
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500
 *         &family=IBM+Plex+Sans:wght@300;400;500;600
 *         &family=IBM+Plex+Serif:ital,wght@0,400;1,300&display=swap" rel="stylesheet">
 *
 * Table of Contents
 * -----------------
 *  1. Design Tokens (CSS Variables)
 *  2. Reset & Base
 *  3. Layout
 *  4. Site Navigation
 *  5. Document Header Bar
 *  6. Hero Block
 *  7. Table of Contents (in-doc)
 *  8. Section Cards
 *  9. Callouts
 * 10. Lists — Bullet & Checklist
 * 11. Code Blocks & Inline Code
 * 12. Tables
 * 13. Architecture Diagrams
 * 14. Decision Records
 * 15. Numbered Steps
 * 16. Document Footer
 * 17. Responsive Breakpoints
 * ============================================================
 */


/* ============================================================
   1. Design Tokens
   ============================================================ */
:root {

  /* Backgrounds */
  --color-page-bg:       #f5f4f2;   /* Warm off-white page background */
  --color-surface:       #ffffff;   /* Card / section surface */
  --color-surface-alt:   #fafaf9;   /* Table headers, TOC hover, subtle tint */

  /* Borders */
  --color-border:        #e8e4e0;   /* Default warm-grey border */
  --color-border-strong: #d4cfc9;   /* Table header bottom, arch diagram boxes */

  /* Text */
  --color-text-primary:  #1c1917;   /* Near-black warm — headings, bold values */
  --color-text-body:     #44403c;   /* Standard body copy */
  --color-text-muted:    #a8a29e;   /* Labels, metadata, section numbers */

  /* Accent — warm orange-red */
  --color-accent:        #c2410c;   /* Primary accent */
  --color-accent-light:  #fff7ed;   /* Info callout background, arch accent tint */
  --color-accent-mid:    #fed7aa;   /* Accent border tone */
  --color-accent-dark:   #9a3412;   /* Accent text on light backgrounds */

  /* Warning — gold */
  --color-gold:          #b45309;
  --color-gold-light:    #fffbeb;
  --color-gold-border:   #fde68a;

  /* Success — green */
  --color-green:         #15803d;
  --color-green-light:   #f0fdf4;
  --color-green-border:  #bbf7d0;

  /* Tags & inline code */
  --color-tag-bg:        #fef3c7;   /* Warm amber tag background */
  --color-tag-text:      #92400e;   /* Tag / inline code text */

  /* Code blocks */
  --color-code-bg:       #1c1917;   /* Dark warm near-black */
  --color-code-text:     #e7e5e4;   /* Default code text */
  --color-code-keyword:  #fb923c;   /* Keywords — warm orange */
  --color-code-string:   #86efac;   /* Strings — soft green */
  --color-code-comment:  #57534e;   /* Comments — warm grey */
  --color-code-variable: #fcd34d;   /* Variables — amber yellow */
  --color-code-function: #67e8f9;   /* Functions — cyan */

  /* Elevation */
  --shadow-sm: 0 1px 4px rgba(28,25,23,.06), 0 1px 2px rgba(28,25,23,.04);
  --shadow-md: 0 4px 16px rgba(28,25,23,.08), 0 2px 4px rgba(28,25,23,.04);

  /* Shape */
  --radius:    5px;
  --radius-lg: 8px;

  /* Typography scale */
  --font-sans:  'IBM Plex Sans',  sans-serif;
  --font-serif: 'IBM Plex Serif', serif;
  --font-mono:  'IBM Plex Mono',  monospace;
}


/* ============================================================
   2. Reset & Base
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family:              var(--font-sans);
  font-size:                15px;
  line-height:              1.65;
  color:                    var(--color-text-primary);
  background:               var(--color-page-bg);
  -webkit-font-smoothing:   antialiased;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/* ============================================================
   3. Layout
   ============================================================ */
.page-wrap {
  max-width: 960px;
  margin:    0 auto;
  padding:   0 24px 80px;
}


/* ============================================================
   4. Site Navigation
   Shown on the public website; hidden in self-contained docs.
   ============================================================ */
.site-nav {
  background:    var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding:       0 24px;
  box-shadow:    var(--shadow-sm);
  position:      sticky;
  top:           0;
  z-index:       200;
  margin-bottom: 40px;
}

.site-nav-inner {
  max-width:      960px;
  margin:         0 auto;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  height:         52px;
  gap:            24px;
}

/* Site wordmark / logo */
.site-logo {
  font-family:     var(--font-mono);
  font-size:       13px;
  font-weight:     500;
  color:           var(--color-text-primary);
  letter-spacing:  .06em;
  text-decoration: none;
  white-space:     nowrap;
}

.site-logo .logo-accent {
  color: var(--color-accent);
}

/* Nav link list */
.site-nav-links {
  display:     flex;
  align-items: center;
  gap:         4px;
  list-style:  none;
}

.site-nav-links a {
  font-size:       13px;
  font-weight:     500;
  color:           var(--color-text-body);
  padding:         6px 10px;
  border-radius:   var(--radius);
  text-decoration: none;
  transition:      background .15s, color .15s;
}

.site-nav-links a:hover,
.site-nav-links a.active {
  background: var(--color-accent-light);
  color:      var(--color-accent);
}

/* Homepage tagline (right side of site-nav) */
.site-tagline {
  font-family:    var(--font-mono);
  font-size:      10.5px;
  color:          var(--color-text-muted);
  letter-spacing: .06em;
}


/* ============================================================
   5. Document Header Bar
   Sticky in-doc header showing doc type + status pill.
   ============================================================ */
.doc-header {
  background:    var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding:       0 24px;
  margin:        0 -24px 40px;
  position:      sticky;
  top:           0;
  z-index:       100;
  box-shadow:    var(--shadow-sm);
}

/* When a site-nav is present, offset the doc-header so it sits below it */
.site-nav ~ .page-wrap .doc-header {
  top: 52px;
}

.doc-header-inner {
  max-width:       960px;
  margin:          0 auto;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          52px;
  gap:             16px;
}

/* "INFRA · RUNBOOK" wordmark */
.doc-wordmark {
  font-family:    var(--font-mono);
  font-size:      11.5px;
  font-weight:    500;
  color:          var(--color-text-muted);
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space:    nowrap;
}

.doc-wordmark .wordmark-accent {
  color: var(--color-accent);
}

.doc-wordmark a {
  color:           inherit;
  text-decoration: none;
}

.doc-wordmark a:hover {
  color: var(--color-accent);
}

/* Status pill */
.doc-status-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  font-size:      11px;
  font-weight:    500;
  padding:        4px 10px;
  border-radius:  20px;
  white-space:    nowrap;
  font-family:    var(--font-mono);
  letter-spacing: .04em;
}

.doc-status-pill::before {
  content:       '';
  width:         6px;
  height:        6px;
  border-radius: 50%;
  flex-shrink:   0;
}

/* Status variants */
.status-approved   { background: var(--color-green-light); color: var(--color-green);      border: 1px solid var(--color-green-border); }
.status-approved::before   { background: var(--color-green); }

.status-draft      { background: var(--color-surface-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.status-draft::before      { background: var(--color-text-muted); }

.status-inreview   { background: var(--color-gold-light);  color: var(--color-gold);       border: 1px solid var(--color-gold-border); }
.status-inreview::before   { background: var(--color-gold); }

.status-deprecated { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.status-deprecated::before { background: #ef4444; }


/* ============================================================
   6. Hero Block
   ============================================================ */
.hero {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-top:    3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding:       36px 40px 32px;
  margin-bottom: 28px;
  box-shadow:    var(--shadow-sm);
}

.hero-eyebrow {
  font-family:    var(--font-mono);
  font-size:      11px;
  font-weight:    500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--color-accent);
  margin-bottom:  12px;
}

.hero h1 {
  font-family:   var(--font-serif);
  font-size:     28px;
  font-weight:   400;
  line-height:   1.2;
  color:         var(--color-text-primary);
  margin-bottom: 10px;
  letter-spacing: -.015em;
}

.hero-subtitle {
  font-size:     15px;
  color:         var(--color-text-body);
  line-height:   1.6;
  margin-bottom: 28px;
  font-weight:   300;
  max-width:     620px;
}

/* Meta grid — author, date, version, tags */
.meta-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  border:                1px solid var(--color-border);
  border-radius:         var(--radius);
  overflow:              hidden;
}

.meta-item {
  padding:      9px 14px;
  border-right: 1px solid var(--color-border);
}

.meta-item:last-child {
  border-right: none;
}

.meta-label {
  font-size:      10px;
  font-weight:    500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin-bottom:  3px;
  font-family:    var(--font-mono);
}

.meta-value {
  font-size:   13px;
  font-weight: 500;
  color:       var(--color-text-primary);
}

/* Tags (also reused in other components) */
.tag {
  display:        inline-block;
  font-size:      10.5px;
  font-weight:    500;
  padding:        2px 7px;
  border-radius:  3px;
  background:     var(--color-tag-bg);
  color:          var(--color-tag-text);
  font-family:    var(--font-mono);
  margin-right:   4px;
}


/* ============================================================
   7. Table of Contents (in-doc)
   ============================================================ */
.toc {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       18px 22px;
  margin-bottom: 28px;
}

.toc-title {
  font-size:      10px;
  font-weight:    500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  font-family:    var(--font-mono);
  margin-bottom:  12px;
}

.toc ol {
  list-style:            none;
  counter-reset:         toc;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1px 28px;
}

.toc li {
  counter-increment: toc;
  display:           flex;
  align-items:       baseline;
  gap:               8px;
  padding:           4px 0;
  border-bottom:     1px solid var(--color-border);
}

.toc li:last-child {
  border-bottom: none;
}

.toc li::before {
  content:        counter(toc, decimal-leading-zero);
  font-family:    var(--font-mono);
  font-size:      9.5px;
  color:          var(--color-accent);
  flex-shrink:    0;
  font-weight:    500;
}

.toc a {
  font-size:       13px;
  color:           var(--color-text-body);
  text-decoration: none;
}

.toc a:hover {
  color: var(--color-accent);
}


/* ============================================================
   8. Section Cards
   ============================================================ */
.section {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       30px 36px;
  margin-bottom: 20px;
  box-shadow:    var(--shadow-sm);
}

.section-header {
  display:        flex;
  align-items:    center;
  gap:            12px;
  margin-bottom:  22px;
  padding-bottom: 14px;
  border-bottom:  1px solid var(--color-border);
}

.section-num {
  font-family:    var(--font-mono);
  font-size:      10px;
  color:          var(--color-accent);
  font-weight:    500;
  letter-spacing: .06em;
}

.section h2 {
  font-family:    var(--font-sans);
  font-size:      16px;
  font-weight:    600;
  color:          var(--color-text-primary);
  letter-spacing: -.01em;
}

h3 {
  font-size:      13.5px;
  font-weight:    600;
  margin:         24px 0 10px;
  letter-spacing: .01em;
  text-transform: uppercase;
  font-family:    var(--font-mono);
  color:          var(--color-text-muted);
}

p {
  color:         var(--color-text-body);
  margin-bottom: 14px;
  font-size:     14.5px;
  line-height:   1.7;
}

p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   9. Callouts
   ============================================================ */
.callout {
  border-radius: var(--radius);
  padding:       14px 18px;
  margin:        20px 0;
  font-size:     14px;
  display:       flex;
  gap:           12px;
  align-items:   flex-start;
  line-height:   1.6;
}

.callout-icon {
  flex-shrink: 0;
  font-size:   16px;
  margin-top:  1px;
}

.callout-body {
  flex: 1;
}

.callout-body strong {
  display:        block;
  font-size:      11px;
  font-weight:    600;
  margin-bottom:  4px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family:    var(--font-mono);
}

/* Callout variants */
.callout.info { background: var(--color-accent-light); border-left: 3px solid var(--color-accent); color: var(--color-accent-dark); }
.callout.warn { background: var(--color-gold-light);   border-left: 3px solid var(--color-gold);   color: #78350f; }
.callout.ok   { background: var(--color-green-light);  border-left: 3px solid var(--color-green);  color: #14532d; }


/* ============================================================
   10. Lists — Bullet & Checklist
   ============================================================ */

/* Styled bullet list (not .checklist) */
ul:not(.checklist) {
  list-style: none;
  margin:     10px 0 16px;
}

ul:not(.checklist) li {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  padding:       6px 0;
  font-size:     14.5px;
  color:         var(--color-text-body);
  line-height:   1.6;
  border-bottom: 1px solid var(--color-border);
}

ul:not(.checklist) li:last-child {
  border-bottom: none;
}

ul:not(.checklist) li::before {
  content:     '▸';
  color:       var(--color-accent);
  font-size:   11px;
  flex-shrink: 0;
  margin-top:  4px;
  font-weight: 700;
}

/* Checklist (goals / non-goals) */
.checklist {
  list-style: none;
}

.checklist li {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  padding:       7px 0;
  font-size:     14.5px;
  color:         var(--color-text-body);
  line-height:   1.6;
  border-bottom: 1px solid var(--color-border);
}

.checklist li:last-child {
  border-bottom: none;
}

.check-icon {
  width:         16px;
  height:        16px;
  border:        1.5px solid var(--color-border-strong);
  border-radius: 3px;
  flex-shrink:   0;
  margin-top:    3px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     10px;
}

.check-icon.done { background: var(--color-green-light); border-color: var(--color-green); color: var(--color-green); }
.check-icon.out  { border-color: #fca5a5; color: #fca5a5; font-size: 9px; }


/* ============================================================
   11. Code Blocks & Inline Code
   ============================================================ */

/* Block code */
pre {
  background:    var(--color-code-bg);
  border-radius: var(--radius);
  padding:       18px 20px;
  overflow-x:    auto;
  margin:        16px 0;
  position:      relative;
  border:        1px solid #2c2826;
}

pre .lang-label {
  position:       absolute;
  top:            8px;
  right:          12px;
  font-family:    var(--font-mono);
  font-size:      9.5px;
  color:          var(--color-code-comment);
  text-transform: uppercase;
  letter-spacing: .1em;
}

code {
  font-family: var(--font-mono);
  font-size:   13px;
  line-height: 1.65;
  color:       var(--color-code-text);
}

/* Syntax highlight spans */
.kw  { color: var(--color-code-keyword);  }
.str { color: var(--color-code-string);   }
.cm  { color: var(--color-code-comment);  font-style: italic; }
.var { color: var(--color-code-variable); }
.fn  { color: var(--color-code-function); }

/* Inline code in body text */
p code,
li code {
  background:    var(--color-tag-bg);
  color:         var(--color-tag-text);
  padding:       1px 5px;
  border-radius: 3px;
  font-size:     12.5px;
  white-space:   nowrap;
}

/* Inline code inside callouts — dark and bold so it reads on light backgrounds */
.callout code {
  background:    rgba(0, 0, 0, .07);
  color:         var(--color-text-primary);
  font-weight:   600;
  padding:       1px 5px;
  border-radius: 3px;
  font-size:     12.5px;
  white-space:   nowrap;
}

/* Inline code inside table cells — slightly warmer to stand out on white */
td code {
  background:    #fef3e8;
  color:         #a8490a;
  padding:       1px 5px;
  border-radius: 3px;
  font-size:     12.5px;
  white-space:   nowrap;
  font-weight:   500;
  border:        1px solid #f5cfa8;
}


/* ============================================================
   12. Tables
   ============================================================ */
.table-wrap {
  overflow-x: auto;
  margin:     16px 0;
}

table {
  width:           100%;
  border-collapse: collapse;
  font-size:       13.5px;
}

thead th {
  background:     var(--color-surface-alt);
  color:          var(--color-text-muted);
  font-size:      10px;
  font-weight:    500;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-family:    var(--font-mono);
  padding:        9px 14px;
  text-align:     left;
  border-top:     1px solid var(--color-border);
  border-bottom:  2px solid var(--color-border-strong);
}

thead th:first-child { border-left:  1px solid var(--color-border); }
thead th:last-child  { border-right: 1px solid var(--color-border); }

tbody td {
  padding:        10px 14px;
  border-bottom:  1px solid var(--color-border);
  color:          var(--color-text-body);
  vertical-align: top;
  line-height:    1.55;
}

tbody td:first-child { border-left:  1px solid var(--color-border); font-weight: 600; color: var(--color-text-primary); }
tbody td:last-child  { border-right: 1px solid var(--color-border); }

tbody tr:hover td { background: var(--color-surface-alt); }


/* ============================================================
   13. Architecture Diagrams
   ============================================================ */
.arch-diagram {
  background:    var(--color-surface-alt);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       28px 20px;
  margin:        16px 0;
  font-family:   var(--font-mono);
}

.arch-box {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      var(--color-surface);
  border:          1px solid var(--color-border-strong);
  border-radius:   4px;
  padding:         6px 14px;
  font-size:       12px;
  color:           var(--color-text-body);
  white-space:     nowrap;
}

.arch-box.accent {
  background:  var(--color-accent-light);
  border-color: var(--color-accent);
  color:       var(--color-accent-dark);
  font-weight: 500;
}

.arch-arrow {
  color:     var(--color-border-strong);
  padding:   0 8px;
  font-size: 16px;
}


/* ============================================================
   14. Decision Records (ADR)
   ============================================================ */
.decision-item {
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  overflow:      hidden;
  margin-bottom: 10px;
}

.decision-header {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       10px 14px;
  background:    var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}

.decision-badge {
  font-family:    var(--font-mono);
  font-size:      9.5px;
  font-weight:    500;
  padding:        2px 7px;
  border-radius:  3px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.badge-accepted { background: var(--color-green-light); color: var(--color-green); border: 1px solid var(--color-green-border); }
.badge-rejected { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.badge-proposed { background: var(--color-gold-light);  color: var(--color-gold);  border: 1px solid var(--color-gold-border); }

.decision-title { font-size: 13.5px; font-weight: 500; color: var(--color-text-primary); }

.decision-body { padding: 12px 14px; font-size: 13.5px; color: var(--color-text-body); line-height: 1.6; }


/* ============================================================
   15. Numbered Steps
   ============================================================ */
.steps {
  list-style:    none;
  counter-reset: steps;
}

.steps li {
  counter-increment: steps;
  display:           flex;
  flex-direction:    row;
  gap:               14px;
  align-items:       flex-start;
  padding:           10px 0;
  border-bottom:     1px solid var(--color-border);
  font-size:         14.5px;
  color:             var(--color-text-body);
  line-height:       1.6;
}

.steps li:last-child {
  border-bottom: none;
}

.steps li::before {
  content:         counter(steps);
  font-family:     var(--font-mono);
  font-size:       10.5px;
  font-weight:     500;
  min-width:       22px;
  width:           22px;
  height:          22px;
  background:      var(--color-accent);
  color:           #fff;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  margin-top:      2px;
}


/* ============================================================
   16. Document Footer
   ============================================================ */
.doc-footer {
  margin-top:      48px;
  padding-top:     18px;
  border-top:      1px solid var(--color-border);
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       11px;
  font-family:     var(--font-mono);
  color:           var(--color-text-muted);
  letter-spacing:  .03em;
}


/* ============================================================
   18. Homepage Index
   ============================================================ */

/* Search bar */
.search-wrap {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       20px 24px;
  margin-bottom: 28px;
  box-shadow:    var(--shadow-sm);
  display:       flex;
  align-items:   center;
  gap:           12px;
}

.search-icon {
  color:       var(--color-text-muted);
  font-size:   15px;
  flex-shrink: 0;
}

.search-input {
  flex:        1;
  border:      none;
  outline:     none;
  font-family: var(--font-sans);
  font-size:   14.5px;
  color:       var(--color-text-primary);
  background:  transparent;
}

.search-input::placeholder { color: var(--color-text-muted); }

.search-count {
  font-family:    var(--font-mono);
  font-size:      10.5px;
  color:          var(--color-text-muted);
  letter-spacing: .04em;
  white-space:    nowrap;
  flex-shrink:    0;
}

/* Category group */
.category-group {
  margin-bottom: 32px;
}

.category-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin-bottom:  10px;
  display:        flex;
  align-items:    center;
  gap:            10px;
}

.category-label::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--color-border);
}

/* Article card grid */
.article-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   10px;
}

.article-card {
  background:      var(--color-surface);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius);
  padding:         16px 18px;
  text-decoration: none;
  display:         flex;
  flex-direction:  column;
  gap:             6px;
  transition:      border-color .15s, box-shadow .15s;
}

.article-card:hover {
  border-color: var(--color-accent);
  box-shadow:   var(--shadow-sm);
}

.article-card-title {
  font-size:   13.5px;
  font-weight: 500;
  color:       var(--color-text-primary);
  line-height: 1.4;
}

.article-card:hover .article-card-title { color: var(--color-accent); }

.article-card-desc {
  font-size:   12.5px;
  color:       var(--color-text-muted);
  line-height: 1.5;
}

.article-card-meta {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-top:  4px;
}

.article-tag {
  display:       inline-block;
  font-size:     9.5px;
  font-weight:   500;
  padding:       1px 6px;
  border-radius: 3px;
  background:    var(--color-tag-bg);
  color:         var(--color-tag-text);
  font-family:   var(--font-mono);
}

.article-status {
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin-left:    auto;
}

.article-status.live  { color: var(--color-green); }
.article-status.draft { color: var(--color-text-muted); }

/* No-results state */
.no-results {
  display:        none;
  text-align:     center;
  padding:        48px 0;
  font-size:      14px;
  color:          var(--color-text-muted);
  font-family:    var(--font-mono);
  letter-spacing: .04em;
}


/* ============================================================
   17. Responsive Breakpoints
   ============================================================ */
@media (max-width: 640px) {
  .toc ol          { grid-template-columns: 1fr; }
  .meta-grid       { grid-template-columns: 1fr 1fr; }
  .hero            { padding: 24px 20px; }
  .hero h1         { font-size: 24px; }
  .section         { padding: 22px 20px; }
  .site-nav-links  { display: none; } /* mobile: hide nav links (add hamburger if needed later) */
  .site-tagline    { display: none; }
  .article-grid    { grid-template-columns: 1fr; }
  .doc-footer      { flex-direction: column; gap: 6px; text-align: center; }
}
