/* Shared documentation-site styling for /guides/ pages. */
:root {
  --bg: #F5F6F7; --card: #ffffff; --side: #ffffff; --text: #1c2024; --muted: #5c6570;
  --border: #e4e7eb; --accent: #38C492; --accent-dark: #2aa87a; --code: #f2f4f6; --hover: #eef0f2;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#14181c; --card:#1b2026; --side:#171c21; --text:#e6e9ec; --muted:#9aa3ad; --border:#2a323b; --code:#232a31; --hover:#232a31; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.7; font-size: 17px;
}
a { color: var(--accent-dark); }

/* Top bar */
.docs-top {
  position: sticky; top: 0; z-index: 20; height: 56px;
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
  background: var(--card); border-bottom: 1px solid var(--border);
}
.docs-top .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; color: var(--text); text-decoration: none; font-size: 16px; }
.docs-top .brand .dot { width: 24px; height: 24px; border-radius: 7px; background: var(--accent); display: grid; place-items: center; color: #06231a; font-weight: 900; }
.docs-top .spacer { flex: 1; }
.docs-top .open-app { background: var(--accent); color: #06231a; font-weight: 700; padding: 7px 16px; border-radius: 9px; text-decoration: none; font-size: 14px; }
.docs-top .open-app:hover { background: var(--accent-dark); color: #fff; }
.docs-top .menu-btn { display: none; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text); width: 38px; height: 38px; font-size: 20px; cursor: pointer; }

/* Layout */
.docs-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); max-width: 1180px; margin: 0 auto; }
.docs-side {
  position: sticky; top: 56px; align-self: start; height: calc(100vh - 56px); overflow-y: auto;
  background: var(--side); border-right: 1px solid var(--border); padding: 26px 18px;
}
.docs-side .group { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin: 18px 8px 8px; }
.docs-side a {
  display: block; padding: 8px 12px; border-radius: 8px; color: var(--text);
  text-decoration: none; font-size: 15px; margin: 2px 0;
}
.docs-side a:hover { background: var(--hover); }
.docs-side a[aria-current="page"] { background: var(--accent); color: #06231a; font-weight: 700; }

.docs-main { min-width: 0; padding: 40px clamp(20px, 5vw, 64px) 90px; }
.docs-main article { max-width: 760px; }
.docs-main .meta { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.docs-main .breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.docs-main .breadcrumb a { text-decoration: none; }
h1 { font-size: 2.1rem; line-height: 1.2; margin: 6px 0 8px; }
h2 { font-size: 1.45rem; margin: 44px 0 12px; scroll-margin-top: 70px; }
h3 { font-size: 1.15rem; margin: 28px 0 8px; scroll-margin-top: 70px; }
.lede { font-size: 1.15rem; color: var(--muted); margin: 0 0 8px; }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }
code { background: var(--code); padding: 2px 6px; border-radius: 6px; font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; }
hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; }

.callout, .cta { background: color-mix(in srgb, var(--accent) 6%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 14px; padding: 20px 24px; margin: 30px 0; }
.cta h3 { margin-top: 0; }
.btn { display: inline-block; background: var(--accent); color: #06231a; font-weight: 700; padding: 11px 22px; border-radius: 10px; text-decoration: none; margin-top: 6px; box-shadow: 0 6px 18px rgba(56,196,146,.35); }
.btn:hover { background: var(--accent-dark); color: #fff; }
.checklist { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px 24px; margin: 24px 0; }
.checklist ul { padding-left: 0; }
.checklist li { list-style: none; margin: 10px 0; position: relative; padding-left: 30px; }
.checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--accent-dark); font-weight: 800; }
.answer-summary { background: color-mix(in srgb, var(--accent) 6%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 14px; padding: 16px 22px; margin: 18px 0 26px; }
.answer-summary p { margin: 0; }
.related { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 22px; margin: 28px 0; }

/* Index cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin: 28px 0; }
.doc-card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 22px; text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s; }
.doc-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.doc-card h3 { margin: 0 0 6px; }
.doc-card p { margin: 0; color: var(--muted); font-size: 15px; }

/* Severity badge on /checks/ pages and cards. */
.sev { display: inline-block; background: var(--code); border: 1px solid var(--border); border-radius: 999px; padding: 1px 10px; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.sev-high { border-color: #d9534f; color: #c9302c; }

footer { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }

/* The mobile drawer backdrop. Hidden (and out of the grid) on desktop so it does
   not consume a grid column and push the main content into an implicit column. */
.docs-scrim { display: none; }

/* Mobile */
@media (max-width: 860px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-top .menu-btn { display: block; }
  .docs-side {
    position: fixed; top: 56px; left: 0; width: 280px; height: calc(100vh - 56px); z-index: 30;
    transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 10px 40px rgba(0,0,0,.2);
  }
  body.nav-open .docs-side { transform: translateX(0); }
  body.nav-open .docs-scrim { display: block; position: fixed; inset: 56px 0 0 0; background: rgba(0,0,0,.35); z-index: 25; }
}