/* ═══════════════════════════════════════════════════════════════════════════
   Jobmand — user guide stylesheet
   Shared by every guide in docs/en/ and docs/pt-BR/, and by docs/index.html.
   Lifted verbatim from the original single-file CRM guide (removed once it became
   docs/en/crm.html), plus the sidebar language switch and the hub page styles.
   No JavaScript anywhere: TOC jumps use scroll-behavior, the language switch is
   a plain link to the sibling file in the other language folder.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --brand: #3366cc;
  --brand-dark: #1e3a8a;
  --ink: #111827;
  --ink-muted: #4b5563;
  --ink-soft: #6b7280;
  --ink-faint: #9ca3af;
  --line: #e5e7eb;
  --line-soft: #f3f4f6;
  --bg: #ffffff;
  --bg-alt: #f9fafb;
  --bg-tint: #eef2ff;
  --green: #059669;
  --green-bg: #ecfdf5;
  --amber: #d97706;
  --amber-bg: #fef3c7;
  --red: #dc2626;
  --red-bg: #fef2f2;
  --code-bg: #1e293b;
  --code-fg: #e2e8f0;
  --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 30px -8px rgba(0,0,0,0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg-alt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Layout ─────────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
  max-width: 1280px;
  margin: 0 auto;
  background: var(--bg);
  box-shadow: var(--shadow-lg);
}

/* ── Sidebar TOC ────────────────────────────────────────────────────── */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1e3a8a 0%, #1e293b 100%);
  color: #fff;
  padding: 28px 22px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-weight: 800;
  letter-spacing: -0.4px;
}
.brand-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #3366cc);
  box-shadow: 0 0 0 4px rgba(99,102,241,0.18);
}
.brand-name { font-size: 18px; }
.brand-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 700;
}

/* ── Language switch (EN │ PT-BR) ───────────────────────────────────── */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.lang-switch a,
.lang-switch .lang-active {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-decoration: none;
  border: none;
  transition: background .15s, color .15s;
}
.lang-switch .lang-active {
  background: rgba(255,255,255,0.16);
  color: #fff;
}
.lang-switch a {
  background: transparent;
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.16);
}
.lang-switch a:hover {
  background: rgba(255,255,255,0.09);
  color: #fff;
  border-color: rgba(255,255,255,0.32);
}

/* ── "All guides" back link ─────────────────────────────────────────── */
.toc-home {
  display: block;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 0;
  margin-bottom: 6px;
  transition: color .15s;
}
.toc-home:hover { color: #fff; border: none; }

.toc-title {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,0.5);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 18px 0 10px;
}
.toc {
  list-style: none;
  padding: 0;
  margin: 0;
}
.toc li { margin: 1px 0; }
.toc a {
  display: block;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  border: none;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  transition: background .15s, color .15s;
  line-height: 1.4;
}
.toc a:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: none;
}
.toc a.section {
  font-weight: 700;
  color: #fff;
  margin-top: 4px;
}
.toc a.sub {
  padding-left: 22px;
  font-size: 12.5px;
}
.sidebar-footer {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

/* ── Main content ────────────────────────────────────────────────────── */
main {
  padding: 56px 64px 96px;
  max-width: 880px;
  margin: 0 auto;
}

.hero {
  border-bottom: 1px solid var(--line);
  padding-bottom: 30px;
  margin-bottom: 40px;
}
.eyebrow {
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin: 0 0 8px;
}
h1 {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.8px;
  margin: 0 0 14px;
  font-weight: 800;
}
.lede {
  font-size: 17px;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.55;
}

h2 {
  font-size: 26px;
  line-height: 1.25;
  margin: 56px 0 14px;
  font-weight: 800;
  letter-spacing: -0.4px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 12px;
}
h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
h3 {
  font-size: 19px;
  line-height: 1.3;
  margin: 32px 0 10px;
  font-weight: 700;
  letter-spacing: -0.2px;
  scroll-margin-top: 12px;
}
h4 {
  font-size: 15px;
  margin: 22px 0 6px;
  font-weight: 700;
  color: var(--ink);
}

p { margin: 12px 0; }
ul, ol { margin: 12px 0; padding-left: 22px; }
li { margin: 6px 0; }
li > p { margin: 4px 0; }

strong { font-weight: 700; }
em { font-style: italic; }

a {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid rgba(51,102,204,0.28);
  transition: border-color .15s;
}
a:hover { border-bottom-color: var(--brand); }

hr {
  border: none;
  height: 1px;
  background: var(--line);
  margin: 48px 0;
}

/* ── Code ─────────────────────────────────────────────────────────────── */
code {
  font-family: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 13px;
  background: var(--bg-tint);
  color: var(--brand);
  padding: 2px 6px;
  border-radius: 5px;
  font-weight: 500;
}
pre {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 18px 22px;
  border-radius: 12px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  margin: 16px 0 24px;
  box-shadow: var(--shadow);
}
pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-weight: 400;
}

/* ── Tables ────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: 16px 0 24px; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--bg);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}
th {
  background: var(--bg-alt);
  text-align: left;
  padding: 11px 14px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--ink-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
tr:last-child td { border-bottom: none; }
td code { font-size: 12px; }

/* ── Callouts ───────────────────────────────────────────────────────────── */
blockquote {
  margin: 18px 0;
  padding: 14px 18px 14px 20px;
  background: var(--bg-tint);
  border-left: 4px solid var(--brand);
  border-radius: 0 12px 12px 0;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.55;
}
blockquote p { margin: 0; }
blockquote p + p { margin-top: 8px; }
blockquote strong { color: var(--brand-dark); }

/* Amber variant — used for "this screen is still in English" notes and for
   anything the reader could get wrong. Same shape, warning colour. */
blockquote.warn {
  background: var(--amber-bg);
  border-left-color: var(--amber);
}
blockquote.warn strong { color: var(--amber); }

/* ── Pills / inline tags ────────────────────────────────────────────────── */
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: none;
  vertical-align: 1px;
}
.pill-green { background: var(--green-bg); color: var(--green); }
.pill-amber { background: var(--amber-bg); color: var(--amber); }
.pill-red   { background: var(--red-bg);   color: var(--red); }
.pill-blue  { background: var(--bg-tint);  color: var(--brand); }
.pill-gray  { background: var(--line-soft);color: var(--ink-muted); }

/* ── Step boxes for workflows ───────────────────────────────────────────── */
.workflow {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 18px 0 24px;
}
.workflow h3 {
  margin-top: 0;
  font-size: 16px;
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
.workflow h3::before {
  content: "▸";
  color: var(--brand);
  font-size: 18px;
}
.workflow ol { margin: 8px 0; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq {
  margin: 16px 0 0;
}
.faq dt {
  font-weight: 700;
  color: var(--ink);
  margin-top: 22px;
  padding-left: 22px;
  position: relative;
}
.faq dt::before {
  content: "Q";
  position: absolute;
  left: 0; top: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq dd {
  margin: 6px 0 0 22px;
  color: var(--ink-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   Hub page (docs/index.html) only
   ═══════════════════════════════════════════════════════════════════════ */

/* The hub has no sticky TOC — it is one centred column. */
.hub .app { grid-template-columns: 1fr; }
.hub main { max-width: 1000px; padding: 56px 48px 96px; }

.hub-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Light-background language switch for the hub (the sidebar one is on navy). */
.lang-switch-light {
  display: flex;
  gap: 6px;
  margin: 6px 0 0;
}
.lang-switch-light a,
.lang-switch-light .lang-active {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-decoration: none;
  border: 1px solid var(--line);
  transition: background .15s, color .15s, border-color .15s;
}
.lang-switch-light .lang-active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.lang-switch-light a {
  background: var(--bg);
  color: var(--ink-muted);
}
.lang-switch-light a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 20px 0 8px;
}
.card {
  display: block;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover {
  border-color: var(--brand);
  border-bottom-color: var(--brand);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.card-title {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
  color: var(--ink);
}
.card-desc {
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}
.card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Hub language panels — swapped by :target, no JavaScript.
   #pt-BR and #es sit before #en in the DOM so the sibling combinator can hide
   #en when one of them is targeted; English is the default because the other
   two start hidden. Each panel carries its own header and switch, so the active
   pill needs no extra rules. (Do not rewrite this as .lang-panel:not(#en) — the
   id inside :not() out-ranks .lang-panel:target and the toggle stops working.) */
#pt-BR.lang-panel, #es.lang-panel { display: none; }
#pt-BR.lang-panel:target, #es.lang-panel:target { display: block; }
#pt-BR.lang-panel:target ~ #en.lang-panel,
#es.lang-panel:target ~ #en.lang-panel { display: none; }

.hub-group-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 40px 0 4px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.hub-group-title:first-of-type { border-top: none; padding-top: 0; margin-top: 28px; }

/* ── Diagram (inline SVG) ──────────────────────────────────────────────
   The one exception to the "no images" rule: a hand-written inline <svg>
   with <text> labels, so every language file carries its own words and the
   page still prints and emails on its own. All colour comes from the tokens
   above; the SVG carries no inline styles. */
.diagram {
  margin: 24px -32px 8px;   /* breaks out of the column a little so the SVG needs no scrollbar on desktop */
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  overflow-x: auto;
}
.diagram svg {
  display: block;
  width: 100%;
  min-width: 720px;
  height: auto;
  font-family: inherit;
}
.diagram .node rect          { fill: var(--bg);       stroke: var(--line);  stroke-width: 1.5; }
.diagram .node-spine rect    { fill: var(--bg-tint);  stroke: var(--brand); }
.diagram .node-money rect    { fill: var(--green-bg); stroke: var(--green); }
.diagram .node-branch rect   { fill: var(--amber-bg); stroke: var(--amber); }
.diagram .node-optional rect { stroke-dasharray: 5 4; }
.diagram .group       { fill: var(--bg-alt); stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 5 4; }
.diagram .group-title { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; fill: var(--ink-soft); }
.diagram .node-title  { font-size: 12.5px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.diagram .node-sub    { font-size: 10.5px; fill: var(--ink-muted); text-anchor: middle; }
.diagram .edge        { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.diagram .edge-auto   { fill: none; stroke: var(--ink-muted); stroke-width: 1.4; stroke-dasharray: 5 4; }
.diagram .arrowhead      { fill: var(--ink); }
.diagram .arrowhead-auto { fill: var(--ink-muted); }
.diagram .edge-label      { font-size: 11px; fill: var(--ink-muted); }
.diagram .edge-label.auto { font-style: italic; }
.diagram .edge-label.mid  { text-anchor: middle; }

.diagram-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.diagram-legend li { display: flex; align-items: center; gap: 8px; }
.diagram-legend .swatch { display: inline-block; width: 26px; height: 0; border-top: 2px solid var(--ink); }
.diagram-legend .swatch-auto { border-top-style: dashed; border-top-color: var(--ink-muted); }
.diagram-legend .swatch-box { display: inline-block; width: 14px; height: 14px; border: 1.5px solid var(--brand); background: var(--bg-tint); border-radius: 3px; }
.diagram-legend .swatch-money    { border-color: var(--green); background: var(--green-bg); }
.diagram-legend .swatch-branch   { border-color: var(--amber); background: var(--amber-bg); }
.diagram-legend .swatch-optional { border-style: dashed; border-color: var(--ink-faint); background: var(--bg); }

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff; font-size: 12pt; }
  .app { display: block; max-width: none; box-shadow: none; }
  .sidebar { display: none; }
  .lang-switch, .lang-switch-light, .toc-home { display: none; }
  main { max-width: none; padding: 0; }
  h1 { font-size: 28pt; }
  h2 { font-size: 18pt; border-top: none; page-break-before: avoid; page-break-after: avoid; }
  h3 { font-size: 14pt; page-break-after: avoid; }
  pre, blockquote, .workflow, table, .card, .diagram { page-break-inside: avoid; }
  .diagram { overflow: visible; border: none; padding: 0; margin-left: 0; margin-right: 0; }
  .diagram svg { min-width: 0; }
  a { color: inherit; border-bottom: none; }
  .card-grid { display: block; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    padding: 18px 22px;
  }
  main { padding: 32px 24px 64px; }
  .hub main { padding: 32px 24px 64px; }
  .diagram { margin-left: 0; margin-right: 0; }
  h1 { font-size: 30px; }
  h2 { font-size: 22px; margin-top: 40px; }
}

/* ── Anchor offset ────────────────────────────────────────────────────── */
h2[id], h3[id] { scroll-margin-top: 16px; }