/* ============================================================
   RideChain.in — Shared Documentation Stylesheet
   One source of truth for all HTML docs. Do not inline styles
   in individual docs; extend here so every page stays consistent.
   ============================================================ */

:root {
  /* Brand palette */
  --rc-green:      #1b7f4b;   /* primary — "deliver / go" */
  --rc-green-dk:   #115c36;
  --rc-green-lt:   #e7f4ec;
  --rc-saffron:    #f4920b;   /* accent — India / energy */
  --rc-saffron-lt: #fff3e0;
  --rc-blue:       #1f5fae;   /* links / info */
  --rc-blue-lt:    #e8f0fb;
  --rc-red:        #c0392b;   /* danger / edge cases */
  --rc-red-lt:     #fdecea;
  --rc-amber:      #b8860b;   /* warning */
  --rc-amber-lt:   #fef6e0;
  --rc-purple:     #6c3fb5;   /* fraud / security */
  --rc-purple-lt:  #f0e9fa;

  /* Neutrals */
  --rc-ink:        #16202b;
  --rc-ink-soft:   #41505e;
  --rc-muted:      #6b7a89;
  --rc-line:       #dde4ea;
  --rc-bg:         #f6f8fa;
  --rc-card:       #ffffff;
  --rc-code-bg:    #0f1722;
  --rc-code-fg:    #e7edf5;

  --rc-radius:     14px;
  --rc-radius-sm:  8px;
  --rc-shadow:     0 1px 3px rgba(16,32,48,.06), 0 8px 24px rgba(16,32,48,.06);
  --rc-shadow-lg:  0 12px 40px rgba(16,32,48,.14);
  --rc-maxw:       1180px;
  --rc-sidebar:    280px;
  --rc-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Devanagari", sans-serif;
  --rc-mono:       "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --rc-ink: #e8eef4; --rc-ink-soft: #c0ccd8; --rc-muted: #8b9aa9;
    --rc-line: #2a3645; --rc-bg: #0c121a; --rc-card: #141d28;
    --rc-green-lt:#13311f; --rc-saffron-lt:#3a2a08; --rc-blue-lt:#11243e;
    --rc-red-lt:#3a1a16; --rc-amber-lt:#332806; --rc-purple-lt:#241634;
    --rc-shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; font-family: var(--rc-font); color: var(--rc-ink);
  background: var(--rc-bg); line-height: 1.65; font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Top bar ---------- */
.rc-topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 22px; background: var(--rc-card);
  border-bottom: 1px solid var(--rc-line); box-shadow: var(--rc-shadow);
}
.rc-topbar .rc-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--rc-ink); text-decoration: none; letter-spacing: -.3px; }
.rc-topbar .rc-logo .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rc-green); box-shadow: 0 0 0 4px var(--rc-green-lt); }
.rc-topbar .spacer { flex: 1; }
.rc-topbar .rc-breadcrumb { color: var(--rc-muted); font-size: 14px; }
.rc-topbar .rc-breadcrumb a { color: var(--rc-blue); text-decoration: none; }

/* ---------- Layout ---------- */
.rc-shell { display: flex; max-width: var(--rc-maxw); margin: 0 auto; gap: 0; }
.rc-sidebar {
  width: var(--rc-sidebar); flex: 0 0 var(--rc-sidebar);
  position: sticky; top: 57px; align-self: flex-start;
  height: calc(100vh - 57px); overflow-y: auto;
  padding: 22px 14px 60px; border-right: 1px solid var(--rc-line);
}
.rc-sidebar h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--rc-muted); margin: 20px 10px 6px; }
.rc-sidebar a { display: block; padding: 6px 10px; border-radius: var(--rc-radius-sm); color: var(--rc-ink-soft); text-decoration: none; font-size: 14px; }
.rc-sidebar a:hover { background: var(--rc-green-lt); color: var(--rc-green-dk); }
.rc-sidebar a.active { background: var(--rc-green); color: #fff; font-weight: 600; }
.rc-content { flex: 1; min-width: 0; padding: 34px 40px 120px; }

/* ---------- Typography ---------- */
.rc-content h1 { font-size: 32px; line-height: 1.2; letter-spacing: -.5px; margin: 0 0 6px; }
.rc-content h2 { font-size: 24px; margin: 44px 0 12px; padding-top: 10px; border-top: 1px solid var(--rc-line); letter-spacing: -.3px; }
.rc-content h3 { font-size: 19px; margin: 28px 0 8px; }
.rc-content h4 { font-size: 16px; margin: 20px 0 6px; color: var(--rc-ink-soft); }
.rc-content p, .rc-content li { color: var(--rc-ink-soft); }
.rc-content a { color: var(--rc-blue); text-decoration: none; border-bottom: 1px solid transparent; }
.rc-content a:hover { border-bottom-color: var(--rc-blue); }
.rc-lead { font-size: 18px; color: var(--rc-muted); margin: 0 0 8px; }
code:not(pre code) { font-family: var(--rc-mono); font-size: .88em; background: var(--rc-green-lt); color: var(--rc-green-dk); padding: 2px 6px; border-radius: 6px; }
pre { background: var(--rc-code-bg); color: var(--rc-code-fg); padding: 18px 20px; border-radius: var(--rc-radius); overflow-x: auto; font-family: var(--rc-mono); font-size: 13.5px; line-height: 1.6; box-shadow: var(--rc-shadow); }
pre code { font-family: inherit; }
kbd { font-family: var(--rc-mono); background: var(--rc-card); border: 1px solid var(--rc-line); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; font-size: .85em; }
hr { border: none; border-top: 1px solid var(--rc-line); margin: 34px 0; }

/* ---------- Hero ---------- */
.rc-hero { background: linear-gradient(135deg, var(--rc-green) 0%, var(--rc-green-dk) 100%); color: #fff; border-radius: var(--rc-radius); padding: 34px 36px; margin-bottom: 28px; box-shadow: var(--rc-shadow-lg); position: relative; overflow: hidden; }
.rc-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.08); }
.rc-hero h1 { color: #fff; margin: 0 0 8px; }
.rc-hero p { color: rgba(255,255,255,.9); margin: 0; max-width: 60ch; }
.rc-hero .rc-pill { background: rgba(255,255,255,.18); color: #fff; }

/* ---------- Pills / badges ---------- */
.rc-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--rc-green-lt); color: var(--rc-green-dk); }
.rc-pill.blue { background: var(--rc-blue-lt); color: var(--rc-blue); }
.rc-pill.saffron { background: var(--rc-saffron-lt); color: var(--rc-saffron); }
.rc-pill.red { background: var(--rc-red-lt); color: var(--rc-red); }
.rc-pill.amber { background: var(--rc-amber-lt); color: var(--rc-amber); }
.rc-pill.purple { background: var(--rc-purple-lt); color: var(--rc-purple); }
.rc-pill.gray { background: var(--rc-line); color: var(--rc-ink-soft); }

/* status dots */
.rc-status { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;}
.rc-status::before { content:""; width:9px; height:9px; border-radius:50%; }
.rc-status.done::before   { background: var(--rc-green); }
.rc-status.wip::before    { background: var(--rc-saffron); }
.rc-status.todo::before   { background: var(--rc-muted); }
.rc-status.blocked::before{ background: var(--rc-red); }

/* ---------- Cards & grid ---------- */
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 18px 0; }
.rc-card { background: var(--rc-card); border: 1px solid var(--rc-line); border-radius: var(--rc-radius); padding: 18px 20px; box-shadow: var(--rc-shadow); transition: transform .12s ease, box-shadow .12s ease; }
a.rc-card { text-decoration: none; color: inherit; display: block; }
a.rc-card:hover { transform: translateY(-2px); box-shadow: var(--rc-shadow-lg); border-color: var(--rc-green); }
.rc-card h3 { margin: 6px 0 4px; font-size: 17px; color: var(--rc-ink); }
.rc-card p { margin: 0; font-size: 14px; color: var(--rc-muted); }
.rc-card .ico { font-size: 26px; line-height: 1; }

/* ---------- Callouts ---------- */
.rc-note { border-left: 4px solid var(--rc-blue); background: var(--rc-blue-lt); padding: 12px 16px; border-radius: var(--rc-radius-sm); margin: 16px 0; }
.rc-note.tip { border-color: var(--rc-green); background: var(--rc-green-lt); }
.rc-note.warn { border-color: var(--rc-amber); background: var(--rc-amber-lt); }
.rc-note.danger { border-color: var(--rc-red); background: var(--rc-red-lt); }
.rc-note.edge { border-color: var(--rc-purple); background: var(--rc-purple-lt); }
.rc-note strong { color: var(--rc-ink); }

/* ---------- Tables ---------- */
.rc-table-wrap { overflow-x: auto; margin: 18px 0; border-radius: var(--rc-radius); border: 1px solid var(--rc-line); box-shadow: var(--rc-shadow); }
table.rc-table { border-collapse: collapse; width: 100%; font-size: 14px; background: var(--rc-card); }
table.rc-table th { background: var(--rc-green); color: #fff; text-align: left; padding: 11px 14px; font-weight: 600; white-space: nowrap; }
table.rc-table td { padding: 10px 14px; border-top: 1px solid var(--rc-line); color: var(--rc-ink-soft); vertical-align: top; }
table.rc-table tr:nth-child(even) td { background: var(--rc-bg); }
table.rc-table code { white-space: nowrap; }

/* ---------- Mermaid figure ---------- */
.rc-figure { background: var(--rc-card); border: 1px solid var(--rc-line); border-radius: var(--rc-radius); padding: 18px; margin: 22px 0; box-shadow: var(--rc-shadow); text-align: center; overflow-x:auto; }
.rc-figure .mermaid { display:block; }
.rc-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--rc-muted); font-style: italic; }

/* ---------- Steps / sequence list ---------- */
.rc-steps { counter-reset: step; list-style: none; padding: 0; margin: 18px 0; }
.rc-steps > li { position: relative; padding: 4px 0 18px 46px; }
.rc-steps > li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--rc-green); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.rc-steps > li:not(:last-child)::after { content:""; position:absolute; left:14px; top:30px; bottom:0; width:2px; background:var(--rc-line); }

/* ---------- KPI strip ---------- */
.rc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 14px; margin: 18px 0; }
.rc-kpi { background: var(--rc-card); border: 1px solid var(--rc-line); border-radius: var(--rc-radius); padding: 16px; box-shadow: var(--rc-shadow); }
.rc-kpi .num { font-size: 26px; font-weight: 800; color: var(--rc-green); letter-spacing: -.5px; }
.rc-kpi .lbl { font-size: 13px; color: var(--rc-muted); }

/* ---------- Footer ---------- */
.rc-footer { max-width: var(--rc-maxw); margin: 0 auto; padding: 28px 40px 60px; color: var(--rc-muted); font-size: 13px; border-top: 1px solid var(--rc-line); display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.rc-footer a { color: var(--rc-blue); text-decoration: none; }
.rc-prevnext { display:flex; justify-content:space-between; gap:14px; margin-top:40px; }
.rc-prevnext a { flex:1; background:var(--rc-card); border:1px solid var(--rc-line); border-radius:var(--rc-radius); padding:14px 18px; text-decoration:none; box-shadow:var(--rc-shadow); }
.rc-prevnext a:hover { border-color:var(--rc-green); }
.rc-prevnext .k { font-size:12px; color:var(--rc-muted); }
.rc-prevnext .v { font-weight:700; color:var(--rc-ink); }
.rc-prevnext .next { text-align:right; }

/* ---------- ToC (in-page) ---------- */
.rc-toc { background: var(--rc-card); border: 1px solid var(--rc-line); border-radius: var(--rc-radius); padding: 14px 18px; margin: 0 0 24px; box-shadow: var(--rc-shadow); }
.rc-toc strong { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--rc-muted); }
.rc-toc ol { margin: 8px 0 0; padding-left: 20px; columns: 2; }
.rc-toc a { color: var(--rc-blue); text-decoration: none; font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .rc-sidebar { display: none; }
  .rc-content { padding: 24px 18px 100px; }
  .rc-toc ol { columns: 1; }
}

/* print */
@media print {
  .rc-sidebar, .rc-topbar, .rc-prevnext { display: none; }
  body { background: #fff; }
  .rc-figure, .rc-card, pre { box-shadow: none; }
}