/* ═══════════════════════════════════════════════════════════════
   Wiki Common Styles — Doctor AI Agent
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset & Base ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; } /* overridden by wiki.html shell for small/medium/large */
body {
  background: #fff; color: #202122;
  font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
  font-size: 1rem; line-height: 1.6;
}

/* ── Layout ── */
.page-wrap { max-width: 1000px; margin: 0 auto; padding: 1.25rem 1.5rem; }
.clear { clear: both; }

/* ── Typography ── */
h1 { font-size: 1.75rem; border-bottom: 1px solid #a2a9b1; padding-bottom: 8px; margin-bottom: 8px; }
h2 { font-size: 1.25rem; color: #0d5c2e; margin: 1.5rem 0 0.75rem; border-bottom: 1px solid #ddd; padding-bottom: 4px; }
h3 { font-size: 1.05rem; margin: 1rem 0 0.4rem; }
p  { margin: 0.5rem 0; }
a  { color: #0645ad; }
ul { margin: 0.4rem 0 0.4rem 1.25rem; }
ol { margin: 0.4rem 0 0.4rem 1.25rem; }
code { background: #f8f9fa; padding: 1px 5px; border-radius: 3px; font-size: 0.85rem; font-family: 'SF Mono', 'Menlo', monospace; }
pre { background: #f8f9fa; padding: 8px; border: 1px solid #eee; border-radius: 3px; font-size: 0.85rem; overflow-x: auto; }

/* ── Breadcrumb ── */
.breadcrumb { font-size: 0.85rem; color: #666; margin-bottom: 1rem; }
.breadcrumb a { color: #0645ad; text-decoration: none; }

/* ── Hatnote ── */
.hatnote { font-style: italic; color: #54595d; font-size: 0.85rem; margin-bottom: 0.75rem; }

/* ── Tables ── */
table { border-collapse: collapse; margin: 0.5rem 0; width: 100%; }
th, td { border: 1px solid #ddd; padding: 0.4rem 0.6rem; font-size: 0.9rem; text-align: left; }
th { background: #f4f4f4; font-weight: 600; }

/* ── Color utilities ── */
.green { color: #2e7d32; font-weight: bold; }
.red   { color: #c62828; font-weight: bold; }
.gray  { color: #888; }
.blue  { color: #1565c0; font-weight: bold; }

/* ── Infobox (float right) ── */
.infobox { float: right; margin: 0 0 0.75rem 1rem; width: 260px; border: 1px solid #a2a9b1; background: #f8f9fa; font-size: 0.85rem; }
.infobox td { border: 1px solid #ddd; padding: 5px 10px; }
.infobox th { background: #e8f5e9; font-weight: 600; width: 90px; border: 1px solid #ddd; padding: 5px 10px; }
.infobox-title { text-align: center; font-weight: bold; font-size: 1rem; background: #0d5c2e; color: #fff; padding: 8px; }
.infobox-image { text-align: center; font-size: 3rem; padding: 12px; }

/* ── TOC ── */
.toc { border: 1px solid #aab; background: #f9f9f9; padding: 0.6rem 1rem; display: inline-block; margin-bottom: 1rem; font-size: 0.85rem; }
.toc-title { font-weight: bold; margin-bottom: 4px; }
.toc ol { margin: 0 0 0 1.25rem; }
.toc a { text-decoration: none; color: #0645ad; }

/* ── Callout boxes ── */
.notice-box  { background: #e8f5e9; border-left: 4px solid #4caf50; padding: 0.5rem 0.75rem; margin: 0.75rem 0; font-size: 0.9rem; }
.info-box    { background: #e3f2fd; border-left: 4px solid #2196f3; padding: 0.5rem 0.75rem; margin: 0.75rem 0; font-size: 0.9rem; }
.warn-box    { background: #fff3e0; border-left: 4px solid #ff9800; padding: 0.5rem 0.75rem; margin: 0.75rem 0; font-size: 0.9rem; }
.danger-box  { background: #ffebee; border-left: 4px solid #f44336; padding: 0.5rem 0.75rem; margin: 0.75rem 0; font-size: 0.9rem; }

/* ── Flow diagrams ── */
.flow { display: flex; align-items: center; gap: 8px; margin: 0.75rem 0; flex-wrap: wrap; }
.flow-step { background: #e8f5e9; border: 1px solid #81c784; padding: 0.4rem 0.75rem; border-radius: 6px; font-weight: bold; font-size: 0.9rem; }
.flow-arrow { color: #888; font-size: 1.15rem; }

/* ── Section grid (home page cards) ── */
.section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0.75rem 0; }
.section-card {
  display: block; padding: 1rem; border: 1px solid #ddd; border-radius: 6px;
  background: #fafafa; text-decoration: none; color: inherit; transition: all 0.15s;
}
.section-card:hover { border-color: #4caf50; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transform: translateY(-1px); }
.section-card h3 { font-size: 1rem; color: #0d5c2e; margin: 0 0 4px; }
.section-card p { font-size: 0.85rem; color: #555; margin: 0; line-height: 1.5; }

/* ── Feature cards ── */
.feature-card { border: 1px solid #ddd; border-radius: 8px; padding: 1rem; margin: 0.75rem 0; background: #fafafa; }
.feature-card h3 { margin-top: 0; color: #0d5c2e; font-size: 1.05rem; border-bottom: 1px solid #e0e0e0; padding-bottom: 4px; }
.feature-card .desc { color: #555; font-size: 0.85rem; margin-bottom: 0.5rem; }

/* ── Status badges ── */
.badge-done { display: inline-block; font-size: 0.65rem; background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; font-weight: 600; }
.badge-wip { display: inline-block; font-size: 0.65rem; background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; font-weight: 600; }
.badge-planned { display: inline-block; font-size: 0.65rem; background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; font-weight: 600; }
.badge-deferred { display: inline-block; font-size: 0.65rem; background: #f5f5f5; color: #888; border: 1px solid #ccc; border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; font-weight: 600; }
.badge-v1 { display: inline-block; font-size: 0.65rem; background: #ede7f6; color: #5e35b1; border: 1px solid #b39ddb; border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; font-weight: 600; }

/* ── Progress bar ── */
.progress-bar { width: 100%; height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden; margin: 0.5rem 0; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #4caf50, #66bb6a); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; color: #fff; }

/* ── Stat row ── */
.stat-row { display: flex; gap: 1rem; margin: 0.75rem 0; flex-wrap: wrap; }
.stat-item { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 0.75rem 1.25rem; text-align: center; min-width: 120px; }
.stat-value { font-size: 1.75rem; font-weight: 700; color: #0d5c2e; }
.stat-label { font-size: 0.75rem; color: #888; margin-top: 2px; }

/* ── Future / greyed-out section ── */
.future-section { border: 1px dashed #ccc; border-radius: 8px; padding: 1rem; margin: 1rem 0; background: #fafafa; }
.future-section h2, .future-section h3 { color: #999; }
.future-section table { opacity: 0.6; }
.future-section p, .future-section li { color: #888; }

/* ── Categories (footer) ── */
.categories { margin-top: 1.5rem; padding: 0.5rem 0.75rem; background: #f8f9fa; border: 1px solid #ddd; border-radius: 3px; font-size: 0.75rem; }
.categories a { margin: 0 6px; color: #0645ad; text-decoration: none; }

/* ── Wiki footer ── */
.wiki-footer { background: #f0f0f0; border-top: 1px solid #ddd; padding: 1rem 1.5rem; font-size: 0.7rem; color: #72777d; text-align: center; margin-top: 2rem; }

/* ── Checklist ── */
ul.checklist { list-style: none; margin-left: 0; }
ul.checklist li { padding: 3px 0; }
ul.checklist li::before { content: "\2610"; margin-right: 6px; color: #999; }
ul.checklist li.done::before { content: "\2611"; color: #4caf50; }
ul.checklist li.done { color: #666; }

/* ── Pipeline ── */
.pipeline { display: flex; align-items: stretch; gap: 0; margin: 1rem 0; flex-wrap: wrap; }
.pipeline-step {
  background: #e8f5e9; border: 1px solid #a5d6a7; padding: 0.6rem 1rem;
  font-size: 0.85rem; text-align: center; position: relative; min-width: 100px;
}
.pipeline-step:first-child { border-radius: 6px 0 0 6px; }
.pipeline-step:last-child { border-radius: 0 6px 6px 0; }
.pipeline-step .step-title { font-weight: 600; color: #0d5c2e; }
.pipeline-step .step-desc { font-size: 0.7rem; color: #666; }
.pipeline-arrow { display: flex; align-items: center; font-size: 1.15rem; color: #4caf50; padding: 0 2px; }