/* Wheel Picker Pro — Guides
   Design: "the same fairground, seen in daylight" — the app itself is
   gold-on-dark-green at night; this is warm paper-and-ink by day. Not a
   re-skin of the app's dark theme, and not a generic blog template. */

:root {
  --paper: #FBF6EC;
  --paper-raised: #F5EEDC;
  --ink: #241C12;
  --ink-soft: #5B4E3A;
  --gold: #C68A1F;
  --red: #A63625;
  --teal: #2C5F6B;
  --rule: #DCD0B4;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Karla', sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

a { color: var(--red); text-decoration: underline; text-decoration-color: rgba(166,54,37,0.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--red); }

h1, h2, h3 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.1;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 24px 20px;
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 0.03em;
  color: var(--ink);
  text-decoration: none;
}
.header-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
}
.header-link:hover { text-decoration: underline; }

main {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 24px 60px;
}

.article-date {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 6px;
}

.article h1 {
  font-size: clamp(32px, 5vw, 44px);
  margin: 0 0 24px;
}

.article-body p { margin: 0 0 20px; }
.article-body h2 {
  font-size: 24px;
  margin: 40px 0 14px;
  padding-top: 4px;
  border-top: 1px solid var(--rule);
}
.article-body ul, .article-body ol { padding-left: 22px; margin: 0 0 20px; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--ink); }
.article-body hr {
  border: none;
  border-top: 1px dashed var(--rule);
  margin: 36px 0 28px;
}
.article-body p:last-child {
  background: var(--paper-raised);
  border-left: 3px solid var(--gold);
  padding: 14px 18px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 0;
}

.guides-index h1 {
  font-size: clamp(32px, 5vw, 44px);
  margin: 0 0 10px;
}
.index-intro {
  color: var(--ink-soft);
  margin: 0 0 32px;
  max-width: 52ch;
}
.index-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.index-item {
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.index-item:last-child { border-bottom: 1px solid var(--rule); }
.index-item a {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.index-item a:hover { color: var(--red); }
.index-item p {
  margin: 8px 0 0;
  color: var(--ink-soft);
}
.index-item .article-date { margin-top: 8px; }

.site-footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 24px 40px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 14px;
}
.site-footer a { color: var(--gold); font-weight: 700; }

@media (max-width: 600px) {
  html, body { font-size: 16px; }
  .site-header { padding: 20px 18px 16px; }
  main { padding: 28px 18px 48px; }
}

/* Randomness audit / simulator page */
.sim-scenario-row, .sim-run-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}
.sim-btn {
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink);
  cursor: pointer;
}
.sim-btn:hover { border-color: var(--gold); }
.sim-btn.active { background: var(--gold); border-color: var(--gold); color: var(--paper); }
.sim-btn.primary { background: var(--teal); border-color: var(--teal); color: var(--paper); }
.sim-btn.primary:hover { opacity: 0.9; }
.sim-btn:disabled { opacity: 0.5; cursor: default; }
.sim-chart {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 200px;
  padding: 0 4px;
  margin: 24px 0 8px;
  border-bottom: 1px solid var(--rule);
}
.sim-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-width: 0;
}
/* Separate from sim-bar-col itself so the expected-value marker line
   can be positioned relative to just the bar's own drawable area (the
   space between the percentage label above and the entry label below),
   not the full column height including that text. */
.sim-bar-track {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sim-bar {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 64px;
  border-radius: 4px 4px 0 0;
  background: var(--teal);
  transition: height 0.3s ease;
}
/* Dashed line marking where a perfectly fair result would sit, at the
   same height scale as the bar next to it — this is what actually
   makes "how close to expected" an immediate visual comparison instead
   of something the reader has to compute from two separate numbers. */
.sim-expected-marker {
  position: absolute;
  left: -4px;
  right: -4px;
  z-index: 2;
  border-top: 2px dashed var(--gold);
}
.sim-bar-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--ink);
}
.sim-bar-label {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 8px;
  text-align: center;
}
.sim-chart-key {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.sim-key-swatch {
  display: inline-block;
  width: 14px;
  height: 0;
  margin-right: 4px;
  vertical-align: middle;
  border-top: 3px solid;
}
.sim-key-actual { border-top-style: solid; border-top-color: var(--teal); }
.sim-key-expected { border-top-style: dashed; border-top-color: var(--gold); }
.sim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 20px;
}
.sim-table th, .sim-table td {
  text-align: right;
  padding: 8px 6px;
  border-bottom: 1px solid var(--rule);
}
.sim-table th:first-child, .sim-table td:first-child { text-align: left; }
.sim-table th {
  font-family: 'Karla', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-weight: 700;
}
.sim-table td { font-family: 'JetBrains Mono', monospace; }
.sim-table td:first-child { font-family: 'Karla', sans-serif; }
.sim-verdict {
  border-left: 3px solid var(--gold);
  background: var(--paper-raised);
  padding: 14px 18px;
  border-radius: 0 6px 6px 0;
  margin: 0 0 24px;
}
.sim-verdict-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.sim-verdict-detail {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.sim-empty {
  color: var(--ink-soft);
  font-style: italic;
  padding: 40px 0;
  text-align: center;
}