/* Missoula Ebike Support
   Design intent: a field manual, not a magazine. Riders may open this on a
   phone at the side of a road, so contrast is high, tap targets are large, and
   nothing important is carried by color alone. */

:root {
  --bg: #faf9f7;
  --surface: #ffffff;
  --ink: #1a1917;
  --ink-soft: #55514b;
  --ink-faint: #857f76;
  --rule: #e3ded6;
  --accent: #1f5f4f;
  --accent-soft: #e8f1ee;
  --warn: #8a5a00;
  --warn-soft: #fdf3e0;
  --stop: #9c2b1e;
  --stop-soft: #fbeae7;
  --radius: 10px;
  --maxw: 62rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --surface: #1d1f23;
    --ink: #eceae6;
    --ink-soft: #b3aea6;
    --ink-faint: #8a857d;
    --rule: #32353b;
    --accent: #6fbba4;
    --accent-soft: #1b2f2a;
    --warn: #e0a94a;
    --warn-soft: #2e2617;
    --stop: #e8837a;
    --stop-soft: #331d1a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

#app {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.1rem 4rem;
}

a { color: var(--accent); }

/* ---------------------------------------------------------------- header */

.site-head {
  padding: 1.6rem 0 1rem;
  border-bottom: 2px solid var(--ink);
}
.brand { display: block; text-decoration: none; color: inherit; }
.brand-name {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand-tag { display: block; color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.15rem; }
.principles { margin-top: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.principle {
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
}

/* ------------------------------------------------------------------- nav */

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}
.nav-link {
  padding: 0.5rem 0.7rem;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.9rem;
  border-radius: 6px;
}
.nav-link:hover { background: var(--surface); color: var(--ink); }
.nav-link.active { color: var(--ink); font-weight: 650; background: var(--accent-soft); }

/* ---------------------------------------------------------------- search */

.search { margin: 1rem 0 0.5rem; }
.search input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-list { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.search-list li {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.45rem 0; border-bottom: 1px solid var(--rule);
}

/* --------------------------------------------------------------- blocks */

.block {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  margin: 1rem 0;
}
.block.hero { border: none; background: none; padding: 1.2rem 0 0; }
.block.note { background: var(--accent-soft); border-color: transparent; }
h1 { font-size: 1.5rem; line-height: 1.3; margin: 0.2rem 0 0.6rem; letter-spacing: -0.01em; }
h2 { font-size: 1.1rem; margin: 1.4rem 0 0.5rem; }
h3 { font-size: 1rem; margin: 0 0 0.5rem; }
h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
     color: var(--ink-faint); margin: 0 0 0.4rem; }
.block > h2:first-child { margin-top: 0; }
p { margin: 0 0 0.8rem; }
.lede { font-size: 1.08rem; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.88rem; }
.inline-link { font-weight: 600; text-decoration: none; }
.inline-link:hover { text-decoration: underline; }

/* ------------------------------------------------------------ home cards */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.7rem;
}
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.9rem;
  background: var(--bg);
}
.card:hover { border-color: var(--accent); }
.card-empty { opacity: 0.72; }
.card-key {
  display: inline-block;
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  margin-bottom: 0.4rem;
}
.card-key.big { font-size: 0.8rem; }
.card h3 { margin: 0 0 0.3rem; }
.card-meta { font-size: 0.8rem; color: var(--ink-faint); margin: 0.5rem 0 0; }

.qh-mini { list-style: none; margin: 0; padding: 0; }
.qh-mini li {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--rule);
}
.qh-mini li:last-child { border-bottom: none; }
.qh-link { text-decoration: none; font-weight: 600; }
.qh-link:hover { text-decoration: underline; }

.tag {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; color: var(--accent); background: var(--accent-soft);
  padding: 0.1rem 0.35rem; border-radius: 3px; white-space: nowrap;
}
.tag-muted { color: var(--ink-faint); background: var(--rule); }
.tag-link { text-decoration: none; }

/* ------------------------------------------------------------ quick help */

.qh-entry h3 { font-size: 1.12rem; }
.checks { margin: 0.5rem 0 0.8rem; padding-left: 1.3rem; }
.checks li { margin-bottom: 0.25rem; }
.caveat {
  background: var(--warn-soft); color: var(--warn);
  padding: 0.6rem 0.8rem; border-radius: 6px; font-size: 0.92rem;
  border-left: 3px solid var(--warn); margin-bottom: 0.8rem;
}
.stop {
  background: var(--stop-soft); color: var(--stop);
  padding: 0.6rem 0.8rem; border-radius: 6px; font-weight: 600;
  border-left: 3px solid var(--stop); margin-bottom: 0.8rem;
}

/* -------------------------------------------------------------- articles */

.crumbs { font-size: 0.85rem; padding: 0.8rem 0 0; color: var(--ink-faint); }
.crumbs a { text-decoration: none; }
.crumb-sep { color: var(--ink-faint); }

.prov { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.badge {
  font-size: 0.72rem; font-weight: 650; padding: 0.22rem 0.5rem;
  border-radius: 4px; border: 1px solid transparent;
}
.badge.small { font-size: 0.66rem; }
.conf-high { color: var(--accent); background: var(--accent-soft); }
.conf-medium { color: var(--warn); background: var(--warn-soft); }
.conf-needs-verification { color: var(--stop); background: var(--stop-soft); }
.ver-ok { color: var(--accent); background: var(--accent-soft); }
.ver-warn { color: var(--warn); background: var(--warn-soft); }
.prov-note {
  flex-basis: 100%; font-size: 0.85rem; color: var(--ink-soft);
  margin: 0.3rem 0 0; font-style: italic;
}
.short {
  border-left: 3px solid var(--accent);
  padding: 0.2rem 0 0.2rem 0.9rem;
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
}
.short p { margin: 0; }
.article p { max-width: 42rem; }
.checks-list { padding-left: 1.2rem; }
.checks-list li { margin-bottom: 0.35rem; }
.safety {
  background: var(--stop-soft); border-radius: var(--radius);
  padding: 0.9rem 1rem; margin: 1.2rem 0;
}
.safety h2 { margin-top: 0; color: var(--stop); }
.safety p { margin-bottom: 0; }
/* Leading safety block: sits directly under the title, so it needs a tighter
   top margin and a harder edge than the mid-article version it replaced. */
.safety-lead { margin-top: 0.8rem; border-left: 3px solid var(--stop); }

.art-list, .queue, .standard, .cautions, .roadmap, .leads, .sources { padding-left: 1.2rem; }
.art-list { list-style: none; padding-left: 0; }
.art-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--rule);
}
.art-link { font-weight: 600; text-decoration: none; }
.art-link:hover { text-decoration: underline; }
.queue { list-style: none; padding-left: 0; }
.queue li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0; border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
}
.standard li, .cautions li, .roadmap li, .leads li { margin-bottom: 0.45rem; }

/* ----------------------------------------------------------- calculators */

.calc-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.8rem;
  margin: 1rem 0;
}
.field { display: flex; flex-direction: column; gap: 0.25rem; }
.field-label { font-size: 0.85rem; font-weight: 600; }
.field input {
  padding: 0.55rem 0.7rem; font-size: 1rem;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--rule); border-radius: 6px;
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field-hint { font-size: 0.76rem; color: var(--ink-faint); line-height: 1.4; }

.output {
  border-top: 1px solid var(--rule);
  margin-top: 1rem;
  padding-top: 1rem;
}
.big-number {
  font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--accent); margin: 0 0 0.4rem;
}
.big-number.fail { color: var(--stop); }
.big-number.pass { color: var(--accent); }
.breakdown { list-style: none; padding: 0; margin: 0 0 0.8rem; }
.breakdown li {
  padding: 0.3rem 0; border-bottom: 1px solid var(--rule); font-size: 0.92rem;
}
.assumptions {
  background: var(--bg); border: 1px dashed var(--rule);
  border-radius: 6px; padding: 0.8rem 0.9rem; margin-top: 0.8rem;
}
.assumptions dl {
  margin: 0; display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: 0.3rem 0.8rem;
}
.assumptions dt { font-weight: 650; font-size: 0.85rem; }
.assumptions dd { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

/* -------------------------------------------------------------- roadmap */

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.7rem; margin-bottom: 1rem;
}
.stat {
  background: var(--bg); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 0.8rem;
}
.stat-n { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.stat-l { display: block; font-size: 0.78rem; color: var(--ink-faint); }

/* ------------------------------------------------------------- templates */

.template blockquote {
  margin: 0; padding: 0.8rem 1rem;
  background: var(--bg); border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0; font-size: 0.97rem;
}

/* ----------------------------------------------------------------- tests */

.test-list { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.test-list li {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
  padding: 0.35rem 0; border-bottom: 1px solid var(--rule); font-size: 0.9rem;
}
.tmark { font-weight: 700; width: 1rem; }
.tpass .tmark { color: var(--accent); }
.tfail { color: var(--stop); }
.tfail .tmark { color: var(--stop); }
.terr { flex-basis: 100%; font-size: 0.8rem; color: var(--stop); }

/* ---------------------------------------------------------------- footer */

.site-foot {
  margin-top: 2.5rem; padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.87rem; color: var(--ink-faint);
}

@media (max-width: 34rem) {
  .brand-name { font-size: 1.35rem; }
  .block { padding: 1rem; }
  .nav-link { padding: 0.45rem 0.55rem; font-size: 0.85rem; }
  .assumptions dl { grid-template-columns: 1fr; gap: 0.1rem; }
  .assumptions dt { margin-top: 0.4rem; }
}

/* -------------------------------------------------------------- diagrams */
/* Inline SVG figures. Colours come from the palette variables so the same
   drawing works in light and dark; nothing here is a second asset to ship. */

.diagram {
  margin: 1.4rem 0;
  padding: 1rem 1rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.d-title { margin: 0 0 0.6rem; font-size: 1rem; }
.d-svg {
  display: block; width: 100%; height: auto;
  max-width: 480px; margin: 0 auto; overflow: visible;
}

.d-axis { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.d-cutoff { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 5 4; }
.d-marker { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 4; }
.d-trace { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.d-rest { stroke: var(--ink-soft); }
.d-healthy { stroke: var(--accent); }
.d-tired { stroke: var(--stop); }
.d-split { fill: var(--ink-soft); }
.d-cross { fill: var(--stop); }
.d-label { fill: var(--ink-soft); font-size: 11px; }
.d-axis-label { fill: var(--ink-faint); font-size: 10px; letter-spacing: 0.04em; }
.d-warn { fill: var(--stop); font-size: 11px; font-weight: 600; }

.d-caption {
  margin: 0.75rem 0 0; color: var(--ink-soft);
  font-size: 0.88rem; line-height: 1.5;
}
.d-replay {
  margin-left: 0.45rem; padding: 0.12rem 0.5rem;
  font: inherit; font-size: 0.82rem; color: var(--ink-soft);
  background: none; border: 1px solid var(--rule);
  border-radius: 4px; cursor: pointer;
}
.d-replay:hover { color: var(--ink); border-color: var(--accent); }
.d-replay:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Motion is opt-in. Without .d-run every element sits at its final state, so
   the figure is complete and readable whether or not the animation ever runs. */
@keyframes d-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes d-appear { from { opacity: 0; } to { opacity: 1; } }

.diagram.d-run .d-trace { stroke-dasharray: 100; animation: d-draw 1s ease-out backwards; }
.diagram.d-run .d-rest { animation-duration: 0.8s; animation-delay: 0.15s; }
.diagram.d-run .d-healthy,
.diagram.d-run .d-tired { animation-duration: 1.1s; animation-delay: 1.05s; }
.diagram.d-run .d-marker,
.diagram.d-run .d-split { animation: d-appear 0.3s ease-out 0.95s backwards; }
.diagram.d-run .d-cross { animation: d-appear 0.3s ease-out 1.95s backwards; }
.diagram.d-run .d-fade-late { animation: d-appear 0.4s ease-out 2.1s backwards; }

@media (prefers-reduced-motion: reduce) {
  .diagram.d-run .d-trace,
  .diagram.d-run .d-marker,
  .diagram.d-run .d-split,
  .diagram.d-run .d-cross,
  .diagram.d-run .d-fade-late { animation: none; stroke-dasharray: none; }
  .d-replay { display: none; }
}

/* Added with the H-001 and B-001 diagrams. */
.d-curve { stroke: var(--accent); }
.d-bracket { fill: none; stroke: var(--ink-faint); stroke-width: 1.2; }

/* ---------------------------------------------------------- hero photo */
/* The owner's own photograph at the top of the home page. Decorative, so it
   is sized to set the tone and then get out of the way of the Quick Help
   list, which is what people actually arrive for. */

.hero-photo { margin: 0.6rem 0 0.2rem; }
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: var(--surface);
  max-height: 260px;
  object-fit: cover;
  object-position: center 40%;
}
@media (max-width: 640px) {
  .hero-photo img { max-height: 170px; }
}
.hero-credit {
  margin: 0.4rem 0.1rem 0;
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}