/* ─────────────────────────────────────────────────────────────────
   ALPA Mobile Docs — Shared Stylesheet
   Applied to all standard-template HTML docs (900px body layout).
   Specialized component-spec pages retain inline styles.
   ───────────────────────────────────────────────────────────────── */

/* Unified nav styles live in docs-nav.css so self-styled pages can
   take the nav without the base rules below. */
@import url("docs-nav.css?v=dfbd8720");

/* ── Reset ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px;
  color: #1a1a1a;
  line-height: 1.6;
  background: #fff;
}

/* ── Navigation ── */
nav { margin-bottom: 24px; }
nav a { font-size: 12px; color: #0066cc; text-decoration: none; }
nav a:hover { text-decoration: underline; }



/* ── Headings ── */
h1 { font-size: 28px; margin-bottom: 4px; }
h2 { font-size: 20px; margin: 32px 0 12px; border-bottom: 1px solid #e0e0e0; padding-bottom: 6px; }
h3 { font-size: 16px; margin: 20px 0 8px; }
h4 { font-size: 14px; margin: 14px 0 6px; font-weight: 600; }

/* ── Body text ── */
p { margin-bottom: 12px; }
ul, ol { margin: 0 0 12px 24px; }
li { margin-bottom: 4px; }
a { color: #0066cc; }
a:hover { text-decoration: underline; }
strong { font-weight: 600; }

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 14px; }
th { background: #f5f5f5; padding: 8px 12px; text-align: left; border: 1px solid #e0e0e0; font-weight: 600; }
td { padding: 8px 12px; border: 1px solid #e0e0e0; vertical-align: top; }

/* ── Code / Pre ── */
pre { background: #f5f5f5; padding: 12px 16px; border-radius: 4px; font-size: 13px; overflow-x: auto; margin-bottom: 12px; }
code { font-family: 'SF Mono', 'SFMono-Regular', Consolas, monospace; font-size: 13px; background: #f0f0f0; padding: 1px 4px; border-radius: 3px; }
pre code { background: none; padding: 0; }

/* ── Misc block elements ── */
blockquote { border-left: 3px solid #e0e0e0; padding: 8px 16px; margin: 0 0 12px; color: #555; font-size: 14px; }
hr { border: none; border-top: 1px solid #e0e0e0; margin: 24px 0; }

/* ── Meta / Timestamp line ── */
.meta { font-size: 12px; color: #9ba1a8; margin-bottom: 32px; }

/* ─────────────────────────────────────────────────────────────────
   Callout / Highlight blocks
   ───────────────────────────────────────────────────────────────── */
.highlight  { background: #e8f5e9; border-left: 3px solid #388e3c; padding: 10px 14px; margin: 8px 0 16px; font-size: 13px; }
.warning    { background: #fff8e1; border-left: 3px solid #f9a825; padding: 10px 14px; margin: 8px 0 16px; font-size: 13px; }
.note       { background: #fff8e1; border-left: 3px solid #f9a825; padding: 10px 14px; margin: 8px 0 16px; font-size: 13px; }
.info       { background: #e8f0fe; border-left: 3px solid #1565c0; padding: 10px 14px; margin: 8px 0 16px; font-size: 13px; }
.tldr       { background: #e8f0fe; border-left: 3px solid #1a73e8; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
.issue      { background: #fff8e1; border-left: 3px solid #f9a825; padding: 10px 14px; margin: 8px 0 16px; font-size: 14px; }
.reg        { background: #f8f9fa; border-left: 3px solid #0066cc; padding: 12px 16px; margin: 0 0 16px; font-size: 14px; }
.compare    { background: #f0f4ff; border-left: 3px solid #0066cc; padding: 8px 12px; margin: 8px 0 16px; font-size: 13px; }
.cars-note  { background: #f0f4ff; border-left: 3px solid #0066cc; padding: 8px 12px; margin: 8px 0 16px; font-size: 13px; }
.scenario   { background: #f8f9fa; border-left: 3px solid #0066cc; padding: 12px 16px; margin: 8px 0 16px; }
.req        { background: #e8f5e9; border-left: 3px solid #388e3c; padding: 8px 12px; margin: 8px 0 16px; font-size: 13px; }
.rec        { background: #e8f5e9; border-left: 3px solid #388e3c; padding: 8px 12px; margin: 8px 0 16px; }
.confirmed  { background: #e8f5e9; border-left: 3px solid #388e3c; padding: 10px 14px; margin: 8px 0 16px; font-size: 13px; }
.accept     { background: #e8f5e9; border-left: 3px solid #388e3c; padding: 8px 12px; margin: 8px 0 12px; font-size: 13px; }
.answer     { background: #e3f2fd; border-left: 3px solid #1565c0; padding: 8px 12px; margin: 4px 0 8px; font-size: 13px; }
.arch       { background: #e8f0fe; border-left: 3px solid #1565c0; padding: 6px 12px; margin: 4px 0; font-size: 13px; }
.open       { background: #fff8e1; border-left: 3px solid #f9a825; padding: 10px 14px; margin: 8px 0 16px; font-size: 13px; }
.risk       { background: #fff8e1; border-left: 3px solid #f9a825; padding: 8px 12px; margin: 8px 0 12px; font-size: 13px; }
.start-here { background: #f0f7ff; border-left: 4px solid #0066cc; padding: 16px 20px; margin-bottom: 24px; }
.dod        { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 4px; padding: 16px; margin-bottom: 16px; }

/* ─────────────────────────────────────────────────────────────────
   Badges
   ───────────────────────────────────────────────────────────────── */
.badge         { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-ok      { background: #d4edda; color: #155724; padding: 1px 5px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.badge-done    { background: #d4edda; color: #155724; padding: 1px 5px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.badge-rec     { background: #d4edda; color: #155724; padding: 1px 5px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.badge-new     { background: #d4edda; color: #155724; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.badge-warn    { background: #fff3cd; color: #856404; padding: 1px 5px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.badge-flagged { background: #fff3cd; color: #856404; padding: 1px 5px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.badge-tight   { background: #fff3cd; color: #856404; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.badge-tbd     { background: #e2e3e5; color: #495057; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.badge-pending { background: #e2e3e5; color: #383d41; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.badge-deferred{ background: #e2e3e5; color: #383d41; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.badge-no      { background: #f8d7da; color: #721c24; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.badge-err     { background: #f8d7da; color: #721c24; padding: 1px 5px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.badge-na      { background: #f8d7da; color: #721c24; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.badge-risk    { background: #f8d7da; color: #721c24; padding: 1px 5px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.badge-missing { background: #f8d7da; color: #721c24; padding: 1px 5px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.badge-dropped { background: #f8d7da; color: #721c24; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.badge-folded  { background: #fff3cd; color: #856404; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.badge-partial { background: #fff3cd; color: #856404; padding: 1px 5px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.badge-active  { background: #ddf4ff; color: #0969da; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.badge-h       { background: #ffebee; color: #b71c1c; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.badge-m       { background: #fff8e1; color: #f57f17; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.badge-mh      { background: #fff3e0; color: #bf360c; padding: 1px 5px; border-radius: 3px; font-size: 11px; }

/* ─────────────────────────────────────────────────────────────────
   Severity
   ───────────────────────────────────────────────────────────────── */
.sev-crit { color: #c62828; font-weight: 600; }
.sev-mod  { color: #e65100; }
.sev-min  { color: #1b5e20; }

/* ─────────────────────────────────────────────────────────────────
   Status
   ───────────────────────────────────────────────────────────────── */
.status-green  { color: #1a7f37; }
.status-red    { color: #cf222e; }
.status-yellow { color: #9a6700; }
.status-pill   { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.done          { background: #d4edda; color: #155724; }
.pending       { background: #fff3cd; color: #856404; }
.resolved      { background: #e8f5e9; padding: 4px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; color: #155724; }
.flagged       { background: #fff3cd; padding: 4px 8px; border-radius: 3px; font-size: 11px; color: #856404; }
.result        { font-weight: 600; color: #155724; }

/* ─────────────────────────────────────────────────────────────────
   Labels
   ───────────────────────────────────────────────────────────────── */
.label      { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.label-high { background: #ffeef0; color: #cf222e; }
.label-med  { background: #fff8e1; color: #9a6700; }
.label-low  { background: #f0f9ff; color: #0969da; }

/* ─────────────────────────────────────────────────────────────────
   Tiers
   ───────────────────────────────────────────────────────────────── */
.tier       { display: inline-block; background: #e8eaf6; color: #283593; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.tier-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; margin-left: 4px; }
.tier1      { background: #d4edda; color: #155724; }
.tier2      { background: #cce5ff; color: #004085; }
.tier3      { background: #fff3cd; color: #856404; }
.tier4      { background: #f8d7da; color: #721c24; }
.tier5      { background: #e2e3e5; color: #383d41; }

/* ─────────────────────────────────────────────────────────────────
   Table of Contents
   ───────────────────────────────────────────────────────────────── */
.toc { background: #f8f9fa; padding: 16px 20px; border-radius: 4px; margin-bottom: 24px; }
.toc h3 { color: #333; font-size: 14px; margin-bottom: 8px; margin-top: 0; border: none; padding: 0; }
.toc a { font-size: 13px; }
.toc ul { margin-left: 16px; }

/* ─────────────────────────────────────────────────────────────────
   Regulatory extract utilities
   ───────────────────────────────────────────────────────────────── */
.citation   { font-size: 12px; color: #888; font-style: italic; }
.section-num{ display: inline-block; background: #0066cc; color: white; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; margin-right: 6px; }
.def-term   { font-weight: 600; font-size: 15px; margin: 24px 0 6px; }
.def-source { font-size: 11px; color: #0066cc; font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────
   Misc single-use utilities
   ───────────────────────────────────────────────────────────────── */
.phase-header { background: #0066cc; color: white; padding: 6px 12px; border-radius: 3px; font-size: 14px; font-weight: 600; }
.figma-id     { font-size: 11px; color: #888; font-family: 'SF Mono', Menlo, Monaco, monospace; }
.email-box    { background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 6px; padding: 24px 28px; margin: 24px 0; }
.email-subject{ font-weight: 600; font-size: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e0e0e0; }
.email-body   { font-size: 14px; line-height: 1.7; }