/* ============================================================================
   Design tokens — Apple HIG subset (light only)
   Zdroj: ~/.claude/skills/apple-hig-designer/resources/design-tokens.css
   ============================================================================ */
:root {
  /* Typography */
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
                 'Helvetica Neue', Arial, sans-serif;
  --text-caption2: 11px;
  --text-caption1: 12px;
  --text-footnote: 13px;
  --text-subhead: 15px;
  --text-callout: 16px;
  --text-body: 17px;
  --text-headline: 17px;
  --text-title3: 20px;
  --text-title2: 22px;
  --text-title1: 28px;
  --text-large-title: 34px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* System colors */
  --system-blue: #007AFF;
  --system-blue-press: #0062CC;
  --system-green: #34C759;
  --system-red: #FF3B30;
  --system-red-press: #D70015;

  /* Gray scale */
  --system-gray: #8E8E93;
  --system-gray3: #C7C7CC;
  --system-gray5: #E5E5EA;
  --system-gray6: #F2F2F7;

  /* Labels (text) */
  --label-primary: #000000;
  --label-secondary: rgba(60, 60, 67, 0.6);
  --label-tertiary: rgba(60, 60, 67, 0.3);

  /* Fills (thin overlays) */
  --fill-primary: rgba(120, 120, 128, 0.2);
  --fill-secondary: rgba(120, 120, 128, 0.16);
  --fill-tertiary: rgba(120, 120, 128, 0.12);
  --fill-quaternary: rgba(120, 120, 128, 0.08);

  /* Backgrounds */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F2F2F7;

  /* Separators */
  --separator: rgba(60, 60, 67, 0.29);
  --separator-thin: rgba(60, 60, 67, 0.18);

  /* Spacing (8pt grid) */
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-focus: 0 0 0 4px rgba(0, 122, 255, 0.3);

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --ease-out: cubic-bezier(0, 0, 0.58, 1);

  /* Touch */
  --touch-min: 44px;
}

/* ============================================================================
   Base reset
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* [hidden] must beat ID-level display rules (#viewer{display:flex}). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font-system);
  font-size: var(--text-body);
  color: var(--label-primary);
  background: var(--bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button, input, select {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

::selection { background: rgba(0, 122, 255, 0.3); }

/* ============================================================================
   Upload screen
   ============================================================================ */
#upload-screen {
  max-width: 560px;
  margin: 12vh auto;
  padding: 0 var(--space-5);
  text-align: center;
}
#upload-screen h1 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-large-title);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}
.subtitle {
  margin: 0 0 var(--space-6);
  font-size: var(--text-subhead);
  color: var(--label-secondary);
  line-height: 1.4;
}

#dropzone {
  background: var(--bg-primary);
  border: 2px dashed var(--separator);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-5);
  cursor: pointer;
  color: var(--label-secondary);
  font-size: var(--text-subhead);
  box-shadow: var(--shadow-sm);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
#dropzone p { margin: 0; }
#dropzone.over {
  background: var(--fill-quaternary);
  border-color: var(--system-blue);
  color: var(--system-blue);
}

#file-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  text-align: left;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
#file-list:empty { display: none; }
#file-list li {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-subhead);
}
#file-list li:not(:last-child) {
  border-bottom: 0.5px solid var(--separator);
}

#process-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-headline);
  font-weight: var(--weight-semibold);
  color: #fff;
  background: var(--system-blue);
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
#process-btn:hover:not(:disabled) { background: var(--system-blue-press); }
#process-btn:active:not(:disabled) { transform: scale(0.98); }
#process-btn:disabled {
  background: var(--fill-tertiary);
  color: var(--label-tertiary);
  cursor: default;
}

.error {
  margin-top: var(--space-4);
  color: var(--system-red);
  font-size: var(--text-subhead);
}

/* ============================================================================
   Viewer layout (rozvržení zachováno)
   ============================================================================ */
/* Reserve the bottom 55px for the free-hosting fixed bar so the legend isn't
   covered by it (this standalone build only). */
#viewer { display: flex; flex-direction: column; height: calc(100vh - 55px); background: var(--bg-primary); }
#map { flex: 1 1 auto; min-height: 300px; }

#elevation-wrap {
  position: relative;
  height: 180px;
  border-top: 0.5px solid var(--separator);
  background: var(--bg-primary);
}
#elevation { width: 100%; height: 100%; display: block; cursor: crosshair; }
#elevation-tooltip {
  position: absolute;
  top: var(--space-2);
  background: var(--bg-primary);
  border: 0.5px solid var(--separator);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-footnote);
  color: var(--label-primary);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  line-height: 1.4;
}

/* ============================================================================
   Controls — HIG toolbar
   ============================================================================ */
#controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-primary);
  border-bottom: 0.5px solid var(--separator);
  flex-wrap: wrap;
}

#controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-subhead);
  font-weight: var(--weight-medium);
  color: var(--label-primary);
  background: var(--fill-quaternary);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
#controls button:hover { background: var(--fill-tertiary); }
#controls button:active { transform: scale(0.96); }

/* Transport controls — larger, bolder glyphs.
   #controls prefix raises specificity above `#controls button`. */
#controls #step-back, #controls #play-pause, #controls #step-fwd {
  font-size: var(--text-title2);
  font-weight: var(--weight-bold);
  line-height: 1;
}

/* Play/pause — prominent action. Fixed width + tight tracking so the glyph
   swap (▶ ↔ ❚❚) never resizes the button. #controls prefix raises specificity
   above `#controls button`. */
#controls #play-pause {
  min-width: 52px;
  letter-spacing: -2px;
  color: #fff;
  background: var(--system-blue);
}
#controls #play-pause:hover { background: var(--system-blue-press); }
/* The ❚❚ glyph + its trailing negative letter-spacing pushes the square ~2px
   right of centre; shift the content left by widening right padding. ▶ stays put. */
#controls #play-pause.playing {
  padding-left: calc(var(--space-3) - 2px);
  padding-right: calc(var(--space-3) + 2px);
}

#clock {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-headline);
  font-weight: var(--weight-semibold);
  min-width: 64px;
}
.muted { color: var(--label-secondary); font-size: var(--text-footnote); }

#scrubber { flex: 1 1 200px; }

.speed-label, .follow-label, .map-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-footnote);
  color: var(--label-secondary);
}

/* Selects — HIG filled control with custom chevron */
#controls select {
  -webkit-appearance: none;
  appearance: none;
  min-height: var(--touch-min);
  padding: var(--space-1) var(--space-8) var(--space-1) var(--space-3);
  font-size: var(--text-subhead);
  color: var(--label-primary);
  background-color: var(--fill-quaternary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%233C3C43' stroke-opacity='0.6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
}
#controls input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--system-blue);
  cursor: pointer;
}

/* #controls #sync-btn — extra id raises specificity above #controls button. */
#controls #sync-btn { margin-left: auto; min-width: 120px; }
#sync-btn.active {
  background: var(--system-red);
  color: #fff;
}
#sync-btn.active:hover { background: var(--system-red-press); }
#sync-btn:disabled {
  background: var(--fill-tertiary);
  color: var(--label-tertiary);
  cursor: default;
  transform: none;
}
#sync-btn:disabled:hover { background: var(--fill-tertiary); }
/* Active stays red even while disabled during playback. */
#sync-btn.active:disabled {
  background: var(--system-red);
  color: #fff;
  cursor: default;
  transform: none;
}

/* ============================================================================
   Range slider (#scrubber) — iOS style
   ============================================================================ */
#scrubber {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--fill-primary);
  border-radius: var(--radius-full);
  cursor: pointer;
}
#scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 0.5px solid var(--separator-thin);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
#scrubber::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 0.5px solid var(--separator-thin);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
#scrubber::-moz-range-track {
  height: 4px;
  background: var(--fill-primary);
  border-radius: var(--radius-full);
}

/* ============================================================================
   Legend / panel — grouped cards
   ============================================================================ */
#legend {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border-top: 0.5px solid var(--separator);
  max-height: 30vh;
  overflow-y: auto;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: 0 1 auto;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-primary);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.legend-row.active {
  border-color: var(--system-blue);
  background: var(--fill-quaternary);
}
.legend-row.hidden-row { opacity: 0.4; }

.swatch { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }
.info { flex: 0 1 auto; cursor: pointer; }
.date-line { display: flex; align-items: center; gap: var(--space-2); }
.date { font-size: var(--text-headline); font-weight: var(--weight-semibold); }
.sep { color: var(--separator); font-weight: var(--weight-regular); }
.finished {
  color: var(--system-green);
  font-weight: var(--weight-semibold);
  font-size: var(--text-caption1);
}

.metrics {
  display: flex;
  gap: var(--space-4);
  margin-top: 2px;
  color: var(--label-secondary);
  font-size: var(--text-footnote);
  font-variant-numeric: tabular-nums;
}
.metrics span { min-width: 72px; }
.gap {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  min-width: 56px;
  text-align: left;
}
.crown { font-size: var(--text-title3); }
/* 44px touch area kept via negative margin so the inline date-line stays compact. */
.eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  margin: calc(var(--touch-min) / -2 + 11px) -8px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: var(--text-headline);
  opacity: 1;
  padding: 0;
}
.legend-row.hidden-row .eye { opacity: 0.35; }

/* ============================================================================
   Reduced motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}