/* ===========================================================================
   Ride Log - Design tokens
   Palette: ink charcoal structure, warm paper panels, rust accent (the
   route-line color, echoed in primary actions), sage as a secondary accent
   for tags/metadata. Display type is a condensed mechanical face (gauge-like
   numerals for dates/stats); body is a clean humanist sans; mono is used for
   coordinates/technical readouts.
   ===========================================================================*/

:root {
  --ink: #1B1F23;
  --ink-soft: #3A3F45;
  --paper: #F7F3EC;
  --paper-raised: #FFFFFF;
  --hairline: #D8D2C4;
  --rust: #C75D2C;
  --rust-dark: #A84A22;
  --sage: #6B7A6E;
  --sage-soft: #E4E9E2;
  --danger: #B3382C;

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-card: 0 2px 12px rgba(27, 31, 35, 0.10);
  --shadow-modal: 0 12px 40px rgba(27, 31, 35, 0.25);
}

* { box-sizing: border-box; }

/* The `hidden` HTML attribute should always win over any `display`
   declared by a class on the same element. Browsers' default UA
   stylesheet rule for [hidden] is `display: none`, but it has the same
   specificity as a plain class selector, so whichever is declared later
   in the stylesheet wins - not "hidden always wins" as one might assume.
   This rule makes that explicit rather than relying on declaration order. */
[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
}

button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
}

/* ===========================================================================
   Login screen
   ===========================================================================*/

.login-screen {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(160deg, rgba(199,93,44,0.07), transparent 60%),
    var(--ink);
}

.login-card {
  background: var(--paper-raised);
  border-radius: var(--radius-md);
  padding: 40px 36px;
  width: 320px;
  text-align: center;
  box-shadow: var(--shadow-modal);
}

.login-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--rust);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
}

.login-title {
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.login-sub {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 8px 0 22px;
}

#login-form { display: flex; flex-direction: column; gap: 10px; }

.login-error {
  color: var(--danger);
  font-size: 13px;
  margin-top: 14px;
}

/* ===========================================================================
   Shared form controls
   ===========================================================================*/

.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 14px 0 6px;
}

.field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 14px;
}

.field-input, .field-select, .field-textarea, .field-date, .field-date-full,
#login-password {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font-size: 14px;
  background: var(--paper-raised);
  color: var(--ink);
}

.field-input:focus, .field-select:focus, .field-textarea:focus,
.field-date:focus, .field-date-full:focus, #login-password:focus {
  outline: 2px solid var(--rust);
  outline-offset: 1px;
}

.field-textarea { resize: vertical; }

.field-row { display: flex; align-items: center; gap: 8px; }

/* Min-nights filter slider + its live value label ("Any" / "3+ nights") */
.field-range {
  width: 100%;
  margin: 8px 0 0;
  accent-color: var(--rust);
}

/* "Biggest day" distance filter slider - a sage-to-rust gradient track
   (short days -> big-mile days) rather than the plain accent-color fill
   used above, so it reads as a distance scale at a glance. accent-color
   can't express a gradient, so the track/thumb are styled directly via
   the vendor-prefixed pseudo-elements below; .field-range's own rules
   above are left untouched and still apply (width/margin), this only
   adds the gradient-specific overrides. Placeholder gradient stops -
   easy to retune later (e.g. against actual day-distance spread) by
   editing the --range-distance-gradient value alone. */
.field-range-distance {
  --range-distance-gradient: linear-gradient(to right, var(--sage), var(--rust));
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  height: 18px;
}

.field-range-distance::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--range-distance-gradient);
}

.field-range-distance::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--paper-raised);
  border: 2px solid var(--rust-dark);
  cursor: pointer;
}

.field-range-distance::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--range-distance-gradient);
}

.field-range-distance::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper-raised);
  border: 2px solid var(--rust-dark);
  cursor: pointer;
}

.field-range-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--rust);
}
.field-row-sep { font-size: 12px; color: var(--ink-soft); }
.field-col { flex: 1; }

/* Without this, the two date inputs below keep their browser-default
   content-based minimum width even though they're also set to
   width: 100% - flex items don't shrink past that intrinsic minimum
   unless min-width is overridden. That minimum is wider than the
   sidebar has room for once its padding and the "to" label are
   accounted for, so the row overflowed and (since the parent section
   already sets overflow-y: auto for its own scroll cap) the browser
   implicitly turned overflow-x on too, showing an unwanted horizontal
   scrollbar rather than just fitting the available width. */
.field-row .field-date { flex: 1 1 0; min-width: 0; width: auto; }

.field-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-top: 14px;
  cursor: pointer;
}

.link-btn {
  background: none;
  border: none;
  color: var(--rust);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.link-btn:hover { color: var(--rust-dark); text-decoration: underline; }

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.btn-small { padding: 6px 12px; font-size: 13px; }

.btn-primary { background: var(--rust); color: white; }
.btn-primary:hover { background: var(--rust-dark); }

.btn-secondary { background: transparent; border-color: var(--hairline); color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink-soft); }

/* ===========================================================================
   Top bar
   ===========================================================================*/

.topbar {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: var(--ink);
  color: var(--paper);
  gap: 20px;
}

.topbar-brand { display: flex; align-items: center; gap: 10px; }

.topbar-actions { display: flex; align-items: center; gap: 10px; }

/* .btn-secondary's default colors (dark text, near-invisible border) are
   tuned for light backgrounds like the modal/drawer it was originally
   used in. The topbar itself is dark (background: var(--ink)), so a
   plain .btn-secondary here would render near-black text on a
   near-black backdrop - this override keeps the same "secondary"
   (outlined, not solid-fill) look but in colors that read on dark. */
.topbar-actions .btn-secondary {
  border-color: rgba(247, 243, 236, 0.35);
  color: var(--paper);
}
.topbar-actions .btn-secondary:hover {
  border-color: var(--paper);
  background: rgba(247, 243, 236, 0.08);
}

.topbar-mark {
  background: var(--rust);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
}

.topbar-title {
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.topbar-stats { flex: 1; }
.topbar-stat {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--hairline);
}

/* ===========================================================================
   Layout
   ===========================================================================*/

.app { height: 100vh; display: flex; flex-direction: column; }

.layout { flex: 1; display: flex; min-height: 0; }

.sidebar {
  width: 340px;
  min-width: 0;
  background: var(--paper-raised);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: width 200ms ease, transform 200ms ease;
}

/* Collapsed state, toggled via #sidebar-toggle-btn. On desktop the sidebar
   is a normal flex item, so shrinking its width is enough to give the map
   the reclaimed space. On mobile (see Responsive section below) the
   sidebar is position:fixed instead, so width has no effect there and it
   is slid off-screen with a transform override instead. */
.sidebar.collapsed {
  width: 0;
  min-width: 0;
  padding: 0;
  border-right: none;
  overflow: hidden;
}

.sidebar-section { padding: 18px 18px 6px; }

/* The filters block (the one sidebar-section that ISN'T the trip list)
   gets a height cap with its own scrollbar, so it can never indefinitely
   squeeze the trip list below it down to nothing as more filter fields
   get added over time - it was unbounded before, which became a real
   problem once Companions and States were added alongside the
   pre-existing filters. */
.sidebar-section:not(.sidebar-list-section) {
  overflow-y: auto;
  max-height: 46vh;
}

.sidebar-list-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}

.sidebar-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

/* Sum of distance_km across the currently listed trips. Deliberately
   understated (small, muted, no label prefix beyond the number itself)
   since it's a nice-to-know total, not something that should compete
   with the heading or the sort control above it. */
.trip-list-total-distance {
  font-size: 11px;
  color: var(--ink-soft);
  opacity: 0.75;
  margin-bottom: 8px;
}

.tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* The class display rules above (and .field-label's display: block)
   would otherwise beat the UA stylesheet's [hidden] { display: none },
   leaving hidden="" elements visible. Needed by the states filter,
   which hides unless a single country is selected. */
.field-label[hidden], .tag-picker[hidden] {
  display: none;
}

.tag-chip {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  cursor: pointer;
  color: var(--ink-soft);
}
.tag-chip.active {
  background: var(--sage-soft);
  border-color: var(--sage);
  color: var(--sage);
  font-weight: 600;
}

.region-banner {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--sage-soft);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--sage);
}

.trip-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 18px 18px;
}

.trip-list-empty {
  color: var(--ink-soft);
  font-size: 13px;
  padding: 10px 0;
}

.trip-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--paper-raised);
  transition: border-color 120ms ease;
}
.trip-card:hover { border-color: var(--rust); }

.trip-card-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

.trip-card-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
}

.trip-card-tags {
  margin-top: 6px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.trip-card-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage);
}

/* ===========================================================================
   Map
   ===========================================================================*/

.map-wrap { flex: 1; position: relative; }
#map { width: 100%; height: 100%; }

.map-hint {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  padding: 8px 10px 8px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.map-hint-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
}
.map-hint-btn.finish {
  background: var(--rust);
  color: #FFFFFF;
}
.map-hint-btn.finish:hover {
  background: var(--rust-dark);
}
.map-hint-btn.cancel {
  background: transparent;
  color: var(--paper);
  text-decoration: underline;
}

/* Bottom-left, deliberately NOT top-left: that corner is already
   occupied by the sidebar-toggle-btn ("Hide filters" pill, top:16) and
   the town-search-box directly beneath it (top:60) - the legend used
   to sit on top of both. Google's zoom control (zoomControl defaults
   to true) occupies bottom-right, so bottom-left is clear. bottom:30px
   (rather than 16px) keeps it clear of Google's attribution strip. */
.frequency-legend {
  position: absolute;
  bottom: 30px;
  left: 16px;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 10px 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.frequency-legend-row { display: flex; align-items: center; gap: 8px; }

.frequency-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.frequency-legend-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.map-toggle-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.map-toggle-btn:hover {
  background: var(--sage-soft);
}
.map-toggle-btn.stops-toggle {
  top: 60px;
}
.map-toggle-btn.inspect-toggle {
  top: 104px;
}
.map-toggle-btn.sidebar-toggle-btn {
  top: 16px;
  right: auto;
  left: 16px;
}
.map-toggle-btn.active {
  background: var(--rust);
  color: #FFFFFF;
}
.map-toggle-btn.active:hover {
  background: var(--rust-dark);
}

/* Standalone search box for filtering trips by town - sits directly
   underneath the sidebar-toggle-btn ("Hide filters") pill on the left,
   following the same top-offset stacking rhythm as the toggle buttons
   stacked on the right (60px, 104px, ...). */
.town-search-box {
  position: absolute;
  top: 60px;
  left: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--paper-raised);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  padding: 6px 6px 6px 16px;
}

/* Continues the same 44px vertical rhythm used by the top-right toggle
   button stack (16px/60px/104px) - the town search box above sits at
   top:60px, so this sits directly below it without overlap. */
.overnight-search-box {
  top: 104px;
}

.town-search-input {
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--ink);
  width: 180px;
  outline: none;
}

.town-search-submit-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border: none;
  border-radius: 999px;
  background: var(--rust);
  color: #FFFFFF;
  cursor: pointer;
}
.town-search-submit-btn:hover {
  background: var(--rust-dark);
}

.town-search-clear-btn {
  font-size: 16px;
  line-height: 1;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 6px;
}
.town-search-clear-btn:hover {
  color: var(--ink);
}

/* ===========================================================================
   Modal (upload)
   ===========================================================================*/

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 31, 35, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal {
  background: var(--paper-raised);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--hairline);
}

.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}
.modal-close:hover { color: var(--ink); }

.modal-tabs {
  display: flex;
  gap: 2px;
  padding: 14px 24px 0;
  border-bottom: 1px solid var(--hairline);
}

.modal-tab {
  background: none;
  border: none;
  padding: 8px 4px 12px;
  margin-right: 18px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.modal-tab.active { color: var(--rust); border-bottom-color: var(--rust); }

.upload-panel { padding: 20px 24px 24px; }

.dropzone {
  border: 2px dashed var(--hairline);
  border-radius: var(--radius-md);
  padding: 32px 20px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
}
.dropzone:hover { border-color: var(--rust); color: var(--ink); }
.dropzone.dragover { border-color: var(--rust); background: var(--sage-soft); }

.upload-preview-map {
  width: 100%;
  height: 180px;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  background: var(--paper);
}

.metadata-form { margin-top: 12px; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* Batch list */

.batch-list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }

.batch-item {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.batch-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.batch-item-filename { font-weight: 600; font-size: 13px; }

.batch-item-status {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--sage);
}
.batch-item-status.error { color: var(--danger); }

.batch-item-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.batch-item-form .batch-tags { grid-column: 1 / -1; }
.batch-item-form .batch-save { grid-column: 1 / -1; }

/* ===========================================================================
   Trip detail drawer
   ===========================================================================*/

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 360px;
  background: var(--paper-raised);
  box-shadow: -4px 0 24px rgba(27,31,35,0.18);
  z-index: 90;
  display: flex;
  flex-direction: column;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--hairline);
}

.drawer-body { padding: 20px 24px; overflow-y: auto; flex: 1; }

.drawer-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}
.drawer-stat-label { color: var(--ink-soft); }
.drawer-stat-value { font-family: var(--font-mono); }

.drawer-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* ===========================================================================
   Companions checkboxes (upload form) and overnight stops list
   ===========================================================================*/

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}
.checkbox-row .field-checkbox {
  margin-top: 0;
}

.stop-input-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.stop-input-row .field-input {
  flex: 1;
}

.stop-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.stop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.stop-item-order {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
}
.stop-item-name {
  flex: 1;
}
.stop-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}
.stop-item-remove:hover {
  color: var(--danger);
}
.stop-item-move {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1;
  padding: 2px 5px;
}
.stop-item-move:hover:not(:disabled) {
  color: var(--ink);
}
.stop-item-move:disabled {
  opacity: 0.25;
  cursor: default;
}

.drawer-stop-list {
  list-style: none;
  margin: 4px 0 0 0;
  padding-left: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}

.drawer-stop-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 2px 0;
}

.drawer-stop-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.drawer-stop-day-km {
  color: var(--rust);
  font-weight: 600;
  font-family: var(--font-mono);
  white-space: nowrap;
  flex-shrink: 0;
}

.drawer-stop-final-day {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 0 18px;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
}

/* ===========================================================================
   Responsive
   ===========================================================================*/

@media (max-width: 760px) {
  .sidebar { position: fixed; left: 0; top: 60px; bottom: 0; z-index: 50; width: 86%; max-width: 320px; }
  .sidebar.collapsed { width: 86%; max-width: 320px; padding: 18px 18px 6px; border-right: 1px solid var(--hairline); overflow: visible; transform: translateX(-100%); }
  .drawer { width: 100%; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===========================================================================
   Stats page
   ===========================================================================*/

.stats-body { overflow-y: auto; height: calc(100vh - 60px); }

.stats-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

.stats-loading, .stats-error {
  text-align: center;
  color: var(--ink-soft);
  padding: 40px 0;
}

.stats-error { color: var(--danger); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.stats-card {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}

.stats-card-wide { grid-column: 1 / -1; }

.stats-card-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0 0 10px;
}

.stats-big-number {
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--rust);
  line-height: 1;
}

.stats-big-number-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 6px;
}

.stats-list { list-style: none; margin: 0; padding: 0; }

.stats-list-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.stats-list-item:last-child { border-bottom: none; }

.stats-list-label { color: var(--ink); }

.stats-list-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--rust);
  white-space: nowrap;
  margin-left: 12px;
}

.stats-list-rank {
  font-family: var(--font-mono);
  color: var(--ink-soft);
  margin-right: 8px;
}