/* Material de apoio — Bioestatística Clínica Aplicada à Oncologia
   Identidade visual derivada da capa: azul-noite, azul (tratamento), âmbar (controle), verde-água (destaque). */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  --bg: #0d1528; --surface: #131d36; --surface-2: #18243f; --line: #26345a;
  --text: #e6ebf5; --muted: #93a0bd; --faint: #5c6a8a;
  --blue: #5aa2ff; --amber: #f5b83d; --teal: #2ec4a6; --red: #ff6b6b; --violet: #b49cff;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --radius: 10px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f8fc; --surface: #ffffff; --surface-2: #eef2f9; --line: #d7deeb;
    --text: #13203b; --muted: #55627e; --faint: #8c97ad;
    --blue: #1f6fd6; --amber: #c98a06; --teal: #10937b; --red: #d64545; --violet: #6b4fd6;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f6f8fc; --surface: #ffffff; --surface-2: #eef2f9; --line: #d7deeb;
  --text: #13203b; --muted: #55627e; --faint: #8c97ad;
  --blue: #1f6fd6; --amber: #c98a06; --teal: #10937b; --red: #d64545; --violet: #6b4fd6;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--font); }
a { color: var(--teal); }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }

header.book { border-bottom: 1px solid var(--line); padding: 28px 0 22px; }
header.book .kicker { font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
header.book h1 { font: 700 clamp(30px, 6vw, 46px)/1.02 var(--display); text-transform: uppercase; margin: 8px 0 6px; letter-spacing: .01em; }
header.book p.sub { margin: 0; color: var(--muted); max-width: 70ch; }
nav.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
nav.toc a { font: 500 13px/1 var(--font); padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--text); background: var(--surface); }
nav.toc a:hover { border-color: var(--teal); }

section.sim { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; margin: 26px 0; scroll-margin-top: 16px; }
section.sim h2 { font: 700 26px/1.1 var(--display); text-transform: uppercase; margin: 0 0 6px; letter-spacing: .01em; }
section.sim .goal { color: var(--muted); margin: 0 0 16px; }
.grid { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; gap: 22px; align-items: start; }
.grid > * { min-width: 0; }
@media (max-width: 760px) { .grid { grid-template-columns: 1fr; } }

.controls { display: flex; flex-direction: column; gap: 14px; }
.ctl label { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.ctl label output { font: 600 14px var(--mono); color: var(--text); }
.ctl input[type=range] { width: 100%; accent-color: var(--teal); }
.ctl select, .ctl input[type=number] { width: 100%; padding: 7px 8px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button, button.btn { font: 500 13px var(--font); padding: 7px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; }
.seg button[aria-pressed="true"], button.btn.primary { background: var(--teal); border-color: var(--teal); color: #06121f; }
button.btn:hover { border-color: var(--teal); }

.plot { width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
.plot svg { display: block; width: 100%; height: auto; }
.plot text { font-family: var(--mono); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 12px; }
.stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.stat .k { font-size: 12px; color: var(--muted); }
.stat .v { font: 600 20px/1.2 var(--mono); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 6px; border-radius: 2px; }

.key { margin-top: 16px; border-left: 3px solid var(--amber); background: color-mix(in srgb, var(--amber) 9%, transparent); padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: 15px; }
.key b { color: var(--amber); }
.note { font-size: 13px; color: var(--faint); margin-top: 10px; }
table.data { width: 100%; border-collapse: collapse; font: 13px var(--mono); }
table.data th, table.data td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: right; }
table.data th:first-child, table.data td:first-child { text-align: left; }

footer.book { border-top: 1px solid var(--line); margin-top: 40px; padding: 18px 0 40px; color: var(--faint); font-size: 13px; }
.theme-toggle { position: fixed; right: 14px; top: 14px; font: 500 12px var(--font); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
@media (max-width: 640px) { .theme-toggle { position: static; display: block; margin: 10px 16px 0 auto; } }