/* Exact flat colors only: no tints, shades, or gradients. */
:root {
  --brown: #964B00;
  --green: #008000;
  --white: #FFFFFF;
}

* { box-sizing: border-box; border-radius: 0; }

body {
  margin: 0;
  background: var(--white);
  color: var(--brown);
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  line-height: 1.5;
}

main { max-width: 480px; margin: 0 auto; padding: 16px; }

h1 { font-size: 2.2rem; margin: 8px 0 0; }
h2 { font-size: 1.3rem; margin: 24px 0 8px; border-bottom: 2px solid var(--brown); }
header p { margin: 0 0 8px; }

label { display: block; margin-top: 12px; font-weight: bold; }

input {
  width: 100%;
  padding: 8px;
  font: inherit;
  color: var(--brown);
  background: var(--white);
  border: 2px solid var(--brown);
}
input:focus { outline: 3px solid var(--green); }

button {
  font: inherit;
  padding: 8px 16px;
  margin-top: 16px;
  color: var(--white);
  background: var(--green);
  border: 2px solid var(--green);
  cursor: pointer;
}
button.secondary { color: var(--brown); background: var(--white); border-color: var(--brown); }
button:focus { outline: 3px solid var(--brown); outline-offset: 2px; }

.field-message { margin: 4px 0 0; min-height: 0; font-style: italic; }
.field-message:empty { display: none; }

.confirm { margin-top: 16px; padding: 12px; border: 2px solid var(--brown); }
.confirm[hidden] { display: none; }
#status { margin: 8px 0 0; font-style: italic; }
#status:empty { display: none; }
.confirm p { margin: 0; }

#result { margin-top: 24px; padding: 12px; border: 2px solid var(--green); }
#result[hidden] { display: none; }
#result h2 { margin-top: 0; border-color: var(--green); color: var(--green); }
.big { font-size: 1.6rem; font-weight: bold; margin: 4px 0; }
.label { font-style: italic; }

details { margin-top: 12px; }
summary { cursor: pointer; font-weight: bold; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; }
td { border-bottom: 1px solid var(--brown); padding: 4px 0; }
td:last-child { text-align: right; }

/* Navigation bar: white, brown text, thin brown line under it, green underline for the current link. */
nav { background: var(--white); border-bottom: 2px solid var(--brown); }
nav[hidden] { display: none; }
.nav-inner { max-width: 480px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: baseline; gap: 12px; }
nav a { color: var(--brown); text-decoration: none; font-size: 1rem; white-space: nowrap; padding: 4px 0; border-bottom: 3px solid var(--white); }
nav a:hover { border-bottom-color: var(--brown); }
nav .brand { font-weight: bold; font-size: 1.15rem; margin-right: auto; border-bottom: 0; }
nav a[aria-current="page"] { font-weight: bold; border-bottom-color: var(--green); }
@media (max-width: 400px) { .nav-inner { gap: 8px; padding: 8px 12px; } nav a { font-size: 0.9rem; } nav .brand { font-size: 1rem; } }

.view[hidden] { display: none; }

/* Home view: the cane animation and the first fact, flat cane green on white. */
#view-home { display: flex; flex-direction: column; align-items: center; padding-top: 16px; }
#view-home[hidden] { display: none; }
#view-home svg { width: 160px; height: 260px; max-width: 60vw; max-height: 45vh; flex: none; }
#cane { fill: var(--green); transform-origin: 60px 190px; }
.node { fill: var(--white); }
.leaf { transform-origin: 60px 26px; }
#view-home.playing #cane { animation: grow 3.2s ease-out forwards; }
#view-home.playing .leaf { animation: unfurl 3.2s ease-out forwards; }
@keyframes grow { from { transform: scaleY(0.05); } to { transform: scaleY(1); } }
@keyframes unfurl { 0%, 60% { opacity: 0; } 100% { opacity: 1; } }
#intro-fact { margin-top: 8px; padding: 12px; border: 2px solid var(--green); }
#intro-fact[hidden] { display: none; }
#intro-fact h2 { margin-top: 0; border-color: var(--green); color: var(--green); }
@media (prefers-reduced-motion: reduce) { #view-home.playing #cane, #view-home.playing .leaf { animation-duration: 0.01s; } }