/* Como Saber se Estou Doente — MVP styles.
   Plain CSS, no build step, mobile-first but fine on desktop (see SCOPE.md). */

:root {
  color-scheme: light;
  --bg: #f7f7f5;
  --surface: #ffffff;
  --text: #1c1c1e;
  --text-muted: #5b5b60;
  --border: #d9d9dc;
  --accent: #2f6f5e;
  --accent-contrast: #ffffff;
  --focus: #1a4fd6;

  --band-baixa-bg: #e6f4ea;
  --band-baixa-text: #1e6b34;
  --band-moderada-bg: #fdf1d6;
  --band-moderada-text: #8a5a00;
  --band-alta-bg: #fbe6e6;
  --band-alta-text: #a3231a;

  --radius: 12px;
}

* {
  box-sizing: border-box;
}

/* The app hides elements with the hidden attribute (back button, context line, the
   optional result notes). Any component rule that sets display would otherwise win
   over the browser default for [hidden], so state it once, here. */
[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}

.app-shell {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.screen {
  display: none;
}

.screen.active {
  display: block;
  animation: fade-in 0.15s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 8px;
}

h2 {
  font-size: 1.25rem;
  margin: 0 0 16px;
}

p {
  margin: 0 0 16px;
  color: var(--text-muted);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.disclaimer {
  font-size: 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--text-muted);
}

.locale-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: -8px;
}

button {
  font: inherit;
  cursor: pointer;
}

.btn-primary {
  display: inline-block;
  width: 100%;
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 8px;
}

.btn-primary:focus-visible,
.condition-option:focus-visible,
.symptom-toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.btn-primary:active {
  opacity: 0.9;
}

.btn-secondary {
  display: inline-block;
  width: 100%;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 12px;
}

.condition-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.condition-option {
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  font-size: 1rem;
  font-weight: 600;
}

.condition-option:hover {
  border-color: var(--accent);
}

/* The demographic screen renders either a single checkbox (influenza's 60+) or a radio
   group (osteoporosis's age band) into .choice-list, so both share one option style. */
.choice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.choice-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
}

.choice-option:hover {
  border-color: var(--accent);
}

.choice-option:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.choice-option input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}

/* A scope limit that changes who the numbers apply to at all (osteoporosis ships as
   women 50+ only) belongs on screen before the checklist, not in fine print under the
   result. */
.scope-note {
  font-size: 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--text-muted);
}

.field-error {
  font-size: 0.875rem;
  color: var(--band-alta-text);
  margin: 12px 0 0;
  /* Block messages may carry a blank line to split them into two paragraphs: the
     infeccao urinaria gate explains asymptomatic bacteriuria to a user it turns away,
     which does not fit one sentence. Single-line messages are unaffected. */
  white-space: pre-line;
}

.symptom-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.symptom-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 1rem;
  text-align: left;
}

.symptom-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Some findings aren't answerable without an explanation (osteoporosis asks for a BMI),
   so a finding may carry a second line. Influenza's symptoms have none and are unaffected. */
.symptom-hint {
  font-size: 0.8rem;
  opacity: 0.75;
  line-height: 1.35;
}

.symptom-toggle[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.symptom-toggle .state-label {
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.8;
  flex-shrink: 0;
}

.checklist-hint {
  font-size: 0.85rem;
}

.result-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

/* A condition may name its band in full ("Baixa probabilidade clínica de trombose")
   rather than use the shared "Probabilidade baixa". At that length the uppercase pill
   wraps and breaks, so those badges opt out of the caps and keep a single line. */
.result-badge.sentence {
  text-transform: none;
  letter-spacing: 0;
}

.result-badge.baixa {
  background: var(--band-baixa-bg);
  color: var(--band-baixa-text);
}

.result-badge.moderada {
  background: var(--band-moderada-bg);
  color: var(--band-moderada-text);
}

.result-badge.alta {
  background: var(--band-alta-bg);
  color: var(--band-alta-text);
}

.result-percent {
  font-size: 3rem;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1;
}

.result-percent-label {
  color: var(--text-muted);
  margin-bottom: 20px;
}

.nudge {
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

details.calc-details {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 16px;
}

details.calc-details summary {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 600;
  color: var(--accent);
}

.calc-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}

.calc-row:first-of-type {
  border-top: none;
}

/* A standing limitation of the evidence itself, shown under every result for a condition
   whose chapter says no combination of findings is diagnostic (osteoporosis). */
.result-caveat {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 12px;
}

.source-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 16px;
}

/* Sits directly under .source-note, so it shouldn't add a second full gap. */
#population-note {
  margin-top: 4px;
}

/* --- Request-a-calculator CTA -------------------------------------------------------
   A quiet aside, not a second call to action: dashed border and muted body copy so it
   reads as an offer rather than competing with the primary button above it. Hidden
   until app.js has a form URL to point it at. */

.request-cta {
  margin-top: 28px;
  padding: 18px 16px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.request-cta h3 {
  font-size: 1rem;
  margin: 0 0 6px;
}

.request-cta p {
  font-size: 0.875rem;
  margin: 0 0 12px;
}

/* The CTA is an <a> wearing .btn-secondary, so it needs the bits a button gets for
   free: centred text and no underline. */
.request-link {
  text-align: center;
  text-decoration: none;
  margin-top: 0;
}

.request-link:hover {
  background: var(--accent);
  color: var(--accent-contrast);
}

.request-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* --- Dark theme -------------------------------------------------------------------
   The inline script in each page's <head> always resolves data-theme to an explicit
   "light" or "dark" before first paint, so there's no prefers-color-scheme block here:
   the OS preference is read in JS and re-read whenever it changes (app.js), and an
   explicit toggle choice in localStorage overrides it. Every token below is a swap of
   a :root token above — no component rule needs to know which theme is active. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131417;
  --surface: #1c1e22;
  --text: #ececee;
  --text-muted: #a2a3aa;
  --border: #33353b;
  --accent: #5fbfa3;
  --accent-contrast: #0d1a16;
  --focus: #7ea6ff;

  --band-baixa-bg: #16311f;
  --band-baixa-text: #86d9a5;
  --band-moderada-bg: #3a2d12;
  --band-moderada-text: #f0c46b;
  --band-alta-bg: #3a1d1a;
  --band-alta-text: #f0a099;
}

/* --- Theme toggle ------------------------------------------------------------------ */

.app-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* Back sits at the start of the header when it exists; the theme toggle stays pinned
   to the right either way. */
.theme-toggle {
  margin-left: auto;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--accent);
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Show the icon for the theme the button would switch *to*: a moon while we're in
   light mode, a sun while we're in dark mode. */
.theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Navigation --------------------------------------------------------------------
   Back is deliberately quiet: it sits in the header, above and away from the primary
   button at the bottom of each screen, so moving backwards never competes with moving
   forwards. The context line under it answers "which calculator am I in, and how much
   is left?" without adding a second row of chrome. */

.nav-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 8px 8px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
}

.nav-back:hover {
  color: var(--text);
  border-color: var(--border);
}

.nav-back:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.nav-context {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 16px;
}

/* Two ways out of the result screen, stacked and equally weighted: going back to change
   an answer is at least as common as starting from scratch. */
.result-actions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.result-actions .btn-secondary {
  margin-top: 0;
}

/* --- Site footer -------------------------------------------------------------------
   Sits outside .app-shell so it survives every screen change, and repeats the
   .app-shell width/padding so it lines up with the content above it. The privacy
   link needs to be reachable from anywhere: a policy nobody can find is no policy. */
.site-footer {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px 32px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* The global p rule adds 16px below every paragraph; the two footer lines belong
   together, so tighten them. */
.site-footer p {
  margin: 0 0 4px;
}

.site-footer p:last-child {
  margin-bottom: 0;
}

.site-footer-author {
  color: var(--text-muted);
}

.site-footer a {
  color: var(--text-muted);
}

.site-footer a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}