/* Timeline only: the four events and their order numbers. Shared rules are in ../shared/base.css. */
.events { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.events .btn { width: 100%; text-align: left; display: flex; gap: 14px; align-items: center; padding: 14px 16px; min-height: 64px; font-size: 18px; }
.events .n { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--raised); color: var(--muted); font-weight: 800; }
.events .btn.set .n { background: var(--accent); color: var(--ink); }
.events .btn.right { border-color: var(--right); }
.events .btn.wrong { border-color: var(--wrong); }
.events .year { margin-left: auto; font-weight: 800; color: var(--muted); }
.answer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.answer-actions #confirm { flex: 1 1 100%; }
.verdict .order { margin: 8px 0 0; padding-left: 0; list-style: none; }
.verdict .order li { padding: 6px 0; border-bottom: 1px solid var(--edge); }
.verdict .order b { display: block; }
/* Check and Start again stay pinned to the bottom edge, so a phone never has to scroll to finish */
#order-actions { position: sticky; bottom: 0; padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--ground); z-index: 1; }
@media (max-height: 600px) { .events { gap: 6px; } .events .btn { min-height: 50px; padding: 8px 12px; font-size: 16px; } }