/* fermi: styles scoped under .lg-fermi. Red = your guess and range, gold = the truth. */
.lg-fermi .fm-q { font-size: clamp(1.25rem, 4.2vw, 1.6rem); line-height: 1.25; margin: .2rem 0 .3rem; }
.lg-fermi .fm-unit { margin: 0 0 .6rem; }
.lg-fermi .fm-axis { display: block; width: 100%; height: auto; margin: .4rem 0 .6rem; overflow: visible; }
.lg-fermi .fm-base { stroke: var(--rule); stroke-width: 2; }
.lg-fermi .fm-tick { stroke: var(--muted); stroke-width: 1; }
.lg-fermi .fm-ticklbl { fill: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.lg-fermi .fm-band { fill: color-mix(in srgb, var(--chip) 28%, transparent); stroke: var(--chip); stroke-width: 1.5; }
.lg-fermi .fm-dot { fill: var(--chip); stroke: var(--paper); stroke-width: 2; }
.lg-fermi .fm-truth { stroke: var(--gold); stroke-width: 3; }
.lg-fermi .fm-truth-cap { fill: var(--gold); }

.lg-fermi .fm-rows { display: grid; gap: .55rem; }
.lg-fermi .fm-row { border: 1px solid var(--rule); border-radius: var(--radius-l); padding: .55rem .8rem .65rem; background: var(--paper); }
.lg-fermi .fm-guess { border-color: color-mix(in srgb, var(--chip) 55%, var(--rule)); }
.lg-fermi .fm-label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .2rem; }
.lg-fermi .fm-help { font-weight: 400; }
.lg-fermi .fm-help::before { content: " · "; }
.lg-fermi .fm-ctl { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem; gap: .7rem; align-items: center; }
.lg-fermi .fm-num { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.lg-fermi .fm-width { margin: .6rem 0 .2rem; }
.lg-fermi .fm-go[hidden] { display: none; }
.lg-fermi .fm-go { align-items: center; gap: .8rem; margin-top: .5rem; flex-wrap: wrap; }
.lg-fermi .fm-keys { font-size: .9rem; }
@media (max-width: 480px) {
  .lg-fermi .fm-ticklbl { font-size: 21px; }
  .lg-fermi .fm-ctl { grid-template-columns: minmax(0, 1fr) 7.5rem; gap: .5rem; }
  .lg-fermi .fm-help { display: block; font-size: .85rem; }
  .lg-fermi .fm-help::before { content: none; }
  .lg-fermi .fm-go .btn { width: 100%; justify-content: center; }
}

/* The end screen sits on the felt. */
.lg-fermi.fm-sum { margin: .4rem 0 .6rem; }
.lg-fermi.fm-sum .fm-sum-q { color: var(--felt-ink); font-size: 1.05rem; margin: 0 0 .2rem; }
.lg-fermi.fm-sum .fm-answer { color: var(--gold); font-size: clamp(1.5rem, 5.5vw, 2.1rem); line-height: 1.15; margin: 0 0 .2rem;
  overflow-wrap: anywhere; }
.lg-fermi.fm-sum .fm-note { color: var(--felt-muted); margin: 0 0 .4rem; }
.lg-fermi.fm-sum .fm-base { stroke: var(--felt-muted); }
.lg-fermi.fm-sum .fm-tick { stroke: var(--felt-muted); }
.lg-fermi.fm-sum .fm-ticklbl { fill: var(--felt-muted); }
.lg-fermi.fm-sum .fm-dot { stroke: var(--felt); }
.lg-fermi.fm-sum .fm-band { fill: color-mix(in srgb, var(--chip) 45%, transparent); }
.lg-fermi.fm-sum .fm-crowd { fill: var(--felt-ink); opacity: .55; }
.lg-fermi .fm-axis.fm-in .fm-truth, .lg-fermi .fm-axis.fm-in .fm-truth-cap { animation: fm-drop .35s ease-out both; }
@keyframes fm-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.lg-fermi .fm-legend { font-size: .85rem; color: var(--felt-muted); display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0 0 .7rem; }
.lg-fermi .fm-legend span { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; }
.lg-fermi .fm-key-you { background: var(--chip); }
.lg-fermi .fm-key-truth { background: var(--gold); border-radius: 2px !important; }
.lg-fermi .fm-key-crowd { background: var(--felt-ink); opacity: .55; }
.lg-fermi .fm-yours { margin: .3rem 0; }
.lg-fermi .fm-lost { margin: .2rem 0 .7rem; padding-left: 1.2rem; color: var(--felt-ink); }
.lg-fermi .fm-lost li { margin-bottom: .15rem; }
.lg-fermi .fm-source a { color: var(--gold); }