/* Manual do Praticante — design tokens & shared styles */
:root{
  --paper:#F5F1E8; --cream:#FAF7F0; --ink:#1C1917; --ink-deep:#0F0D0C;
  --amber:#D97706; --amber-soft:#E89440; --amber-light:#FEF3E2;
  --sage:#6B7C6D; --sage-deep:#4A5C4D;
  --green:#16A34A; --yellow:#CA8A04; --orange:#EA580C; --red:#B91C1C;
  --green-bg:#F0FDF4; --yellow-bg:#FEFCE8; --orange-bg:#FFF7ED; --red-bg:#FEF2F2;
  --gray-300:#D6D3D1; --gray-400:#A8A29E; --gray-500:#78716C; --gray-600:#57534E; --gray-700:#44403C;
  --border:#D8CFBD;
  --serif:'Crimson Pro',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:80px}
html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{padding:24px 20px 100px;max-width:820px;margin:0 auto}

/* ===== TOPBAR ===== */
.topbar{position:sticky;top:0;background:rgba(245,241,232,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);margin:-24px -20px 24px;padding:14px 20px;border-bottom:1px solid var(--border);z-index:50;display:flex;align-items:center;gap:14px}
.topbar a.back{font-family:var(--mono);font-size:10pt;color:var(--gray-600);text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:4px;transition:background 0.15s}
.topbar a.back:hover{background:var(--cream);color:var(--amber)}
.topbar .title-bar{font-family:var(--serif);font-size:14pt;font-weight:500;color:var(--ink);flex:1;line-height:1.2}
.topbar .title-bar em{color:var(--amber);font-style:italic}

/* ===== HEADER ===== */
header.hero{margin-bottom:40px;padding-bottom:28px;border-bottom:1px solid var(--border)}
.kanji{display:inline-block;font-family:var(--serif);font-size:44pt;font-weight:300;color:var(--amber);line-height:1;margin-bottom:14px;letter-spacing:-0.02em}
.wordmark{font-family:var(--mono);font-size:9pt;letter-spacing:0.3em;text-transform:uppercase;color:var(--gray-500);margin-bottom:8px}
h1.title{font-family:var(--serif);font-weight:400;font-size:38pt;line-height:1.05;letter-spacing:-0.02em;margin-bottom:12px}
h1.title em{color:var(--amber);font-style:normal;font-weight:500}
.subtitle{font-size:13pt;color:var(--gray-700);font-weight:300;line-height:1.5}

/* ===== META ===== */
.meta{background:var(--cream);border:1px solid var(--border);border-radius:6px;padding:16px 20px;margin-top:20px;font-size:10.5pt;color:var(--gray-700);display:grid;gap:6px}
.meta strong{color:var(--ink);font-weight:600}
.meta-row{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.meta-row .label{font-family:var(--mono);font-size:8.5pt;color:var(--gray-500);letter-spacing:0.1em;text-transform:uppercase;min-width:80px;flex-shrink:0}

/* ===== SECTION HEADINGS ===== */
.section-title{font-family:var(--serif);font-size:26pt;font-weight:500;color:var(--ink);margin-top:48px;margin-bottom:8px;letter-spacing:-0.01em;line-height:1.1}
.section-title em{color:var(--amber);font-style:italic}
.section-sub{font-family:var(--mono);font-size:8.5pt;letter-spacing:0.18em;text-transform:uppercase;color:var(--gray-500);font-weight:500;margin-bottom:8px;margin-top:48px}

/* ===== HOWTO / CALLOUT ===== */
.howto{background:var(--cream);border-left:3px solid var(--sage);padding:18px 22px;margin:28px 0;border-radius:0 6px 6px 0;font-size:11pt;line-height:1.65;color:var(--gray-700)}
.howto h3{font-family:var(--serif);font-size:14pt;font-weight:600;margin-bottom:10px;color:var(--ink)}
.howto ul{padding-left:20px;margin-top:8px}
.howto ul li{margin-bottom:4px}
.howto code{font-family:var(--mono);font-size:9.5pt;background:rgba(0,0,0,0.05);padding:1px 6px;border-radius:3px;color:var(--ink)}

/* ===== PROSE ===== */
p.prose,.prose p{font-size:11.5pt;line-height:1.7;color:var(--gray-700);margin-bottom:14px}
.prose strong{color:var(--ink)}

/* ===== CARDS / BLOCKS ===== */
.card{background:var(--cream);border:1px solid var(--border);border-radius:8px;padding:22px 24px;margin-bottom:18px}
.card .label{font-family:var(--mono);font-size:9pt;letter-spacing:0.15em;text-transform:uppercase;color:var(--amber);font-weight:600;margin-bottom:6px}
.card h3{font-family:var(--serif);font-size:18pt;font-weight:600;line-height:1.2;margin-bottom:10px;color:var(--ink)}

/* ===== CALLOUT TYPES ===== */
.callout{margin:14px 0;padding:14px 18px;border-radius:0 6px 6px 0;font-size:10.5pt;line-height:1.6;color:var(--gray-700)}
.callout strong.callout-label{display:block;font-family:var(--mono);font-size:8.5pt;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:4px;font-weight:600}
.callout.marcos{background:var(--amber-light);border-left:3px solid var(--amber)}
.callout.marcos strong.callout-label{color:var(--amber)}
.callout.alerta{background:var(--red-bg);border-left:3px solid var(--red)}
.callout.alerta strong.callout-label{color:var(--red)}
.callout.nota{background:var(--cream);border-left:3px solid var(--sage)}
.callout.nota strong.callout-label{color:var(--sage)}
.callout.success{background:var(--green-bg);border-left:3px solid var(--green)}
.callout.success strong.callout-label{color:var(--green)}

/* ===== TABLE GENÉRICA ===== */
.tbl{width:100%;border-collapse:collapse;margin:14px 0;font-size:10.5pt}
.tbl thead{background:var(--paper)}
.tbl thead th{padding:10px 12px;text-align:left;font-family:var(--mono);font-size:8.5pt;letter-spacing:0.08em;text-transform:uppercase;color:var(--gray-500);border-bottom:2px solid var(--border);font-weight:600}
.tbl tbody td{padding:11px 12px;border-bottom:1px solid var(--border);color:var(--gray-700);line-height:1.5;vertical-align:top}
.tbl tbody td:first-child{font-weight:600;color:var(--ink)}
.tbl tbody tr:last-child td{border-bottom:none}

/* responsive tables — empilha em mobile */
@media(max-width:600px){
  .tbl.stack thead{display:none}
  .tbl.stack tbody td{display:block;padding:6px 14px;border-bottom:none}
  .tbl.stack tbody tr{display:block;padding:12px 0;border-bottom:1px solid var(--border)}
  .tbl.stack tbody td:before{content:attr(data-label);font-family:var(--mono);font-size:8pt;color:var(--gray-500);text-transform:uppercase;letter-spacing:0.08em;display:block;margin-bottom:2px}
  .tbl.stack tbody td:first-child{padding-top:0;font-size:12pt;color:var(--ink)}
  .tbl.stack tbody td:first-child:before{display:none}
}

/* ===== CHECKLIST ===== */
.checklist{margin:0 0 16px 0;padding-left:0;list-style:none}
.checklist li{padding:8px 0;border-bottom:1px dashed var(--border);font-size:11pt;line-height:1.55;color:var(--gray-700);position:relative;padding-left:32px}
.checklist li:last-child{border-bottom:none}
.checklist li:before{content:"✓";position:absolute;left:0;top:8px;width:22px;height:22px;background:var(--green-bg);color:var(--green);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11pt;font-weight:700}
.checklist li strong{color:var(--ink);font-family:var(--mono);font-size:9pt;letter-spacing:0.05em;text-transform:uppercase;color:var(--gray-500);font-weight:600;margin-right:6px}

/* ===== PHASE NAV (jump nav) ===== */
.phase-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:32px 0}
@media(min-width:600px){.phase-nav{grid-template-columns:repeat(4,1fr)}}
.phase-nav a{padding:14px 12px;border-radius:6px;text-decoration:none;text-align:center;font-family:var(--mono);font-size:9.5pt;font-weight:500;letter-spacing:0.05em;border:1px solid;transition:transform 0.15s, box-shadow 0.15s}
.phase-nav a:active{transform:translateY(1px)}
.phase-nav a.p1{background:var(--green-bg);color:var(--green);border-color:#BBF7D0}
.phase-nav a.p2{background:var(--yellow-bg);color:var(--yellow);border-color:#FEF08A}
.phase-nav a.p3{background:var(--orange-bg);color:var(--orange);border-color:#FED7AA}
.phase-nav a.p4{background:var(--red-bg);color:var(--red);border-color:#FECACA}
.phase-nav a strong{display:block;font-family:var(--serif);font-size:13pt;font-style:italic;margin-top:2px;letter-spacing:0;text-transform:none}

/* ===== PRINCIPLES (dark block) ===== */
.principles{margin-top:48px;background:var(--ink-deep);color:var(--paper);border-radius:8px;padding:28px}
.principles .label{font-family:var(--mono);font-size:9pt;letter-spacing:0.2em;text-transform:uppercase;color:var(--amber-soft);font-weight:500;margin-bottom:10px}
.principles h3{font-family:var(--serif);font-size:22pt;font-weight:500;margin-bottom:18px;line-height:1.1;color:var(--paper)}
.principles h3 em{color:var(--amber);font-style:italic}
.principles ol,.principles ul{padding-left:22px;font-size:11pt;line-height:1.7;color:var(--gray-300)}
.principles li{margin-bottom:8px}
.principles li strong{color:var(--paper);font-weight:600}
.principles li code{font-family:var(--mono);font-size:9.5pt;background:rgba(255,255,255,0.08);padding:1px 6px;border-radius:3px;color:var(--amber-soft)}

/* ===== RELATED LINKS ===== */
.related{margin-top:40px;padding:22px 24px;background:var(--paper);border:1px solid var(--border);border-radius:8px}
.related .label{font-family:var(--mono);font-size:9pt;letter-spacing:0.18em;text-transform:uppercase;color:var(--gray-500);font-weight:500;margin-bottom:14px}
.related a{display:block;padding:10px 0;border-bottom:1px solid var(--border);color:var(--ink);text-decoration:none;font-size:11pt;transition:color 0.15s}
.related a:last-child{border-bottom:none}
.related a:hover{color:var(--amber)}
.related a .arrow{float:right;color:var(--amber);font-family:var(--mono)}

footer{margin-top:56px;padding-top:24px;border-top:1px solid var(--border);text-align:center;font-family:var(--mono);font-size:8.5pt;color:var(--gray-500);letter-spacing:0.15em;text-transform:uppercase}
footer em{font-style:italic;color:var(--gray-700);text-transform:none;letter-spacing:0;font-family:var(--serif);font-size:11pt;display:block;margin-top:10px}

/* ===== BOTTOM NAV (mobile) ===== */
.bottomnav{position:fixed;bottom:0;left:0;right:0;background:rgba(245,241,232,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:10px 8px calc(10px + env(safe-area-inset-bottom));display:flex;justify-content:space-around;z-index:40}
.bottomnav a{flex:1;text-align:center;text-decoration:none;color:var(--gray-500);font-family:var(--mono);font-size:8pt;letter-spacing:0.05em;text-transform:uppercase;padding:6px 4px;border-radius:4px;transition:color 0.15s;line-height:1.2}
.bottomnav a.active{color:var(--amber)}
.bottomnav a:active{background:var(--cream)}
.bottomnav a .nav-icon{display:block;font-size:14pt;margin-bottom:2px;font-family:var(--serif);line-height:1}
@media(min-width:900px){.bottomnav{display:none}body{padding-bottom:48px}}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width:520px){
  body{padding:20px 16px 100px}
  h1.title{font-size:30pt}
  .kanji{font-size:36pt}
  .section-title{font-size:22pt}
  .card{padding:18px 18px}
  .principles{padding:24px 20px}
  .topbar{margin:-20px -16px 24px;padding:12px 16px}
  .tbl{font-size:10pt}
  .tbl thead th,.tbl tbody td{padding:8px 10px}
}