/* ============================================================
   osocios role guides — shared print stylesheet
   Themeable per role via --accent / --accent-deep / --accent-soft.
   Rendered to PDF with WeasyPrint (A4).
   ============================================================ */

@page {
  size: A4;
  margin: 20mm 17mm 18mm 17mm;
  @bottom-left  { content: var(--running-foot); font-family: 'Lato', sans-serif; font-size: 8.5pt; color: #94a3b8; }
  @bottom-right { content: "Page " counter(page) " / " counter(pages); font-family: 'Lato', sans-serif; font-size: 8.5pt; color: #94a3b8; }
}
@page :first { margin: 0; @bottom-left { content: ""; } @bottom-right { content: ""; } }
@page cover  { margin: 0; @bottom-left { content: ""; } @bottom-right { content: ""; } }

:root {
  /* osocios brand */
  --green-700:#15803d; --green-600:#16a34a; --green-500:#22c55e; --green-50:#f0fdf4;
  --ink:#0f172a; --ink-2:#334155; --ink-3:#64748b; --ink-4:#94a3b8;
  --line:#e5e7eb; --line-2:#d1d5db; --bg-soft:#f8fafc;
  --amber:#f59e0b; --amber-bg:#fef3c7; --red-500:#ef4444; --rose-50:#fff1f2;
  --blue-600:#2563eb; --blue-50:#eff6ff;

  /* role accent — overridden inline per guide */
  --accent:#16a34a; --accent-deep:#052e16; --accent-mid:#14532d; --accent-soft:#f0fdf4; --accent-line:#bbf7d0;
  --running-foot:"osocios.club guide";
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:#fff; }
body {
  font-family:'Lato','Helvetica Neue','Arial','Liberation Sans',sans-serif;
  color:var(--ink); font-size:10.5pt; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.cover-title,.cover-eyebrow,.kpi .val,.lede { font-family:'Poppins','Lato',sans-serif; }
h1,h2,h3,h4 { color:var(--ink); margin:0 0 .45em; line-height:1.18; }
h1 { font-size:27pt; letter-spacing:-.02em; font-weight:800; }
h2 { font-size:17pt; letter-spacing:-.015em; font-weight:800; margin-top:0; }
h3 { font-size:12.5pt; font-weight:700; margin-top:1.1em; }
h4 { font-size:10.5pt; font-weight:700; margin-top:.9em; color:var(--ink-2); }
p  { margin:0 0 .65em; }
ul,ol { margin:0 0 .75em 1.2em; padding:0; }
li { margin-bottom:.22em; }
strong { font-weight:700; }
a { color:var(--accent); text-decoration:none; }
code { font-family:'SF Mono','Menlo','Consolas',monospace; font-size:9.5pt; background:#f1f5f9; padding:1px 5px; border-radius:4px; color:#0f172a; }
.small { font-size:9pt; color:var(--ink-3); }
.muted { color:var(--ink-3); }

/* ---------- Cover ---------- */
.cover {
  page:cover; page-break-after:always;
  height:297mm; width:210mm;
  background:linear-gradient(160deg, var(--accent-deep) 0%, var(--accent-mid) 45%, var(--accent) 100%);
  color:#fff; padding:34mm 22mm 24mm; position:relative; overflow:hidden;
}
.cover::before {
  content:""; position:absolute; right:-55mm; top:-55mm;
  width:150mm; height:150mm; border:14mm solid rgba(255,255,255,.06); border-radius:50%;
}
.cover::after {
  content:""; position:absolute; left:-40mm; bottom:-50mm;
  width:120mm; height:120mm; background:rgba(255,255,255,.04); border-radius:50%;
}
.cover-logo { font-family:'Poppins',sans-serif; font-weight:800; font-size:15pt; letter-spacing:-.01em; color:#fff; position:relative; z-index:1; display:flex; align-items:center; gap:9px; }
.cover-logo span { opacity:.7; font-weight:600; }
.cover-logo-mark { width:22px; height:22px; flex:0 0 auto; border-radius:6px; }
.cover-eyebrow { position:relative; z-index:1; margin-top:78mm; text-transform:uppercase; letter-spacing:.22em; font-size:9.5pt; font-weight:700; color:rgba(255,255,255,.78); }
.cover-title { position:relative; z-index:1; font-size:40pt; font-weight:800; letter-spacing:-.02em; line-height:1.04; margin:.25em 0 .35em; }
.cover-sub { position:relative; z-index:1; font-size:13pt; color:rgba(255,255,255,.9); max-width:130mm; line-height:1.5; }
.cover-foot { position:absolute; left:22mm; bottom:22mm; z-index:1; font-size:9.5pt; color:rgba(255,255,255,.7); }
.cover-pill { display:inline-block; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:4px 13px; font-size:9pt; font-weight:700; letter-spacing:.04em; }

/* ---------- TOC ---------- */
.toc { margin:2mm 0 4mm; }
.toc h2 { margin-bottom:.5em; }
.toc-row { display:flex; align-items:baseline; gap:8px; padding:5px 0; border-bottom:1px solid var(--line); font-size:11pt; }
.toc-row .n { width:22px; height:22px; flex:0 0 auto; border-radius:6px; background:var(--accent-soft); color:var(--accent); font-weight:800; font-size:9.5pt; display:inline-flex; align-items:center; justify-content:center; }
.toc-row .t { font-weight:600; }
.toc-row .d { color:var(--ink-3); font-weight:400; }

/* ---------- Sections ---------- */
.section { page-break-inside:auto; margin-top:7mm; }
.section + .section { margin-top:9mm; }
.section-eyebrow { text-transform:uppercase; letter-spacing:.16em; font-size:8pt; font-weight:800; color:var(--accent); margin-bottom:3px; }
.lede { font-size:11.5pt; color:var(--ink-2); margin-bottom:1em; line-height:1.5; }
.rule { height:3px; width:46px; background:var(--accent); border-radius:2px; margin:.2em 0 1em; }

/* ---------- Numbered steps ---------- */
.steps { counter-reset:step; list-style:none; margin:.4em 0 1em; padding:0; }
.steps > li { position:relative; padding:0 0 .9em 34px; margin:0; }
.steps > li::before {
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:-1px;
  width:23px; height:23px; border-radius:50%;
  background:var(--accent); color:#fff; font-weight:800; font-size:10pt;
  display:flex; align-items:center; justify-content:center;
}
.steps > li:not(:last-child)::after {
  content:""; position:absolute; left:11px; top:25px; bottom:2px; width:2px; background:var(--line-2);
}
.steps strong { color:var(--ink); }
.outcome { display:block; margin-top:2px; color:var(--accent); font-weight:700; font-size:9.7pt; }
.outcome::before { content:"→ "; }

/* ---------- Callouts ---------- */
.callout { border-radius:10px; padding:11px 14px 11px 13px; margin:.7em 0 1em; font-size:9.9pt; border-left:4px solid; }
.callout p:last-child { margin-bottom:0; }
.callout .lab { display:block; font-weight:800; font-size:8.5pt; text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px; }
.callout.info  { background:var(--blue-50); border-color:var(--blue-600); }
.callout.info .lab { color:var(--blue-600); }
.callout.tip   { background:var(--accent-soft); border-color:var(--accent); }
.callout.tip .lab { color:var(--accent); }
.callout.warn  { background:var(--amber-bg); border-color:var(--amber); }
.callout.warn .lab { color:#b45309; }
.callout.danger{ background:var(--rose-50); border-color:var(--red-500); }
.callout.danger .lab { color:#b91c1c; }

/* ---------- Cards / grid ---------- */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:.6em 0 1em; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin:.6em 0 1em; }
.card { border:1px solid var(--line); border-radius:10px; padding:11px 13px; background:#fff; }
.card h4 { margin-top:0; }
.card .small { margin:0; }
.card.soft { background:var(--bg-soft); }

/* feature chips */
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:.3em 0 1em; }
.chip { display:inline-flex; align-items:center; gap:5px; font-size:9pt; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line); }

/* ---------- UI mock chrome ---------- */
.mock { border:1px solid var(--line-2); border-radius:12px; overflow:hidden; margin:.5em 0 1.1em; }
.mock-bar { background:#f1f5f9; border-bottom:1px solid var(--line); padding:6px 11px; font-size:8.5pt; color:var(--ink-3); display:flex; align-items:center; gap:6px; }
.mock-bar .dot { width:8px; height:8px; border-radius:50%; background:#cbd5e1; }
.mock-bar .url { margin-left:6px; font-family:'SF Mono',monospace; font-size:8pt; color:var(--ink-3); }
.mock-body { padding:13px 15px; background:#fff; }
.mock-head { background:linear-gradient(120deg,var(--accent-mid),var(--accent)); color:#fff; padding:11px 15px; }
.mock-head .small { color:rgba(255,255,255,.85); }
.mock-head .h { font-family:'Poppins',sans-serif; font-weight:800; font-size:13pt; }

/* nav pills (portal demo) */
.navrow { display:flex; gap:6px; flex-wrap:wrap; margin:.4em 0; }
.navpill { font-size:8.5pt; font-weight:700; padding:5px 11px; border-radius:8px; background:var(--bg-soft); border:1px solid var(--line); color:var(--ink-2); }
.navpill.on { background:var(--accent); color:#fff; border-color:var(--accent); }

/* key/reference table */
.kv { width:100%; border-collapse:collapse; margin:.4em 0 1em; font-size:10pt; }
.kv th, .kv td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.kv th { background:var(--bg-soft); font-weight:700; color:var(--ink-2); font-size:9pt; text-transform:uppercase; letter-spacing:.04em; }
.kv td:first-child { font-weight:700; white-space:nowrap; width:34%; }

/* spin / prize bubble */
.bigtip { background:var(--accent-soft); border:1px dashed var(--accent-line); border-radius:12px; padding:13px 16px; margin:.6em 0 1em; display:flex; gap:13px; align-items:flex-start; }
.bigtip .em { font-size:20pt; line-height:1; }

/* role badge on cover-area headings */
.who { display:inline-block; font-size:9pt; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:3px 11px; border-radius:999px; }

/* page break helper */
.break { page-break-before:always; }
.section, .card, .callout, .mock, .steps > li { -weasy-bookmark-level:none; }

/* ---------- Screen (browser) view ----------
   The rules above target A4/WeasyPrint output. Read directly in a browser
   (this file is served straight out of public/guides/), the fixed mm sizing
   collapses to a narrow column with no page margins. This block gives the
   web view its own layout: full-width cover, a readable centred column for
   the rest, real side margins at both mobile and desktop widths. */
@media screen {
  body { background:#f1f5f9; }

  .cover {
    width:100%; height:auto; min-height:0;
    padding:40px 20px 44px;
  }
  .cover-eyebrow { margin-top:28px; }
  .cover-title { font-size:26pt; }
  .cover-foot { position:static; margin-top:28px; }

  .toc, .section {
    max-width:720px; margin-left:auto; margin-right:auto;
    padding-left:20px; padding-right:20px;
  }
}

@media screen and (min-width:768px) {
  .cover { padding:64px 48px 72px; }
  .cover-eyebrow { margin-top:40px; }
  .cover-title { font-size:38pt; }
  .cover-foot { margin-top:40px; }
  .toc, .section { padding-left:24px; padding-right:24px; }
}