/**
 * ╔══════════════════════════════════════════════════════════════════════════════╗
 * ║  style.css — AlbumDrop Visual Design System                               ║
 * ╠══════════════════════════════════════════════════════════════════════════════╣
 * ║                                                                            ║
 * ║  An Apple-inspired design system with:                                    ║
 * ║    • CSS custom properties (variables) for consistent theming             ║
 * ║    • Automatic dark mode via prefers-color-scheme media query             ║
 * ║    • Responsive layout that adapts to mobile screens                      ║
 * ║    • Reduced motion support for accessibility                             ║
 * ║    • Smooth animations (fade in, spin, pulse)                             ║
 * ║                                                                            ║
 * ║  ── Section Overview ──────────────────────────────────────────────────    ║
 * ║                                                                            ║
 * ║    1. Reset & Base        — Box-sizing reset, typography, body styles     ║
 * ║    2. Layout              — Container, header, footer, app area           ║
 * ║    3. Legal Links         — Privacy Policy / Terms links in header        ║
 * ║    4. Card                — Main content card with shadow and radius      ║
 * ║    5. Buttons             — Primary, secondary, danger, Google styles     ║
 * ║    6. Drop Zone           — File drag-and-drop area (WELCOME screen)     ║
 * ║    7. Validation          — Checklist items with animated icons           ║
 * ║    8. Summary             — Stats grid, folder options, limitations       ║
 * ║    9. Upload Progress     — Progress bar, speed, current file display     ║
 * ║   10. Results             — Statistics rows, failed/album lists           ║
 * ║   11. Animations          — Keyframe definitions (fadeIn, spin, pulse)    ║
 * ║   12. Re-auth Banner      — Token expiry warning during upload            ║
 * ║   13. Modal Overlay       — Legal document modal (Privacy, Terms)         ║
 * ║   14. Responsive          — Mobile breakpoint adjustments (≤480px)        ║
 * ║   15. Accessibility       — Reduced motion, screen reader utilities       ║
 * ╚══════════════════════════════════════════════════════════════════════════════╝
 */


/* ═══════════════════════════════════════════════════════════════════════════════
   1. RESET & BASE
   Universal box-sizing, margin/padding reset, and root CSS custom properties.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Universal reset — ensures consistent sizing across all elements */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/*
 * CSS Custom Properties (Design Tokens)
 * These variables define the entire color scheme, spacing, and typography.
 * Changing these values updates the entire app's appearance.
 */
:root {
  /* ── Background colors ── */
  --bg: #f5f5f7;                    /* Page background (light grey, Apple-style) */
  --bg-card: #ffffff;               /* Card/panel background */

  /* ── Text colors (three levels of emphasis) ── */
  --text: #1d1d1f;                  /* Primary text (headings, important content) */
  --text-secondary: #6e6e73;        /* Secondary text (labels, descriptions) */
  --text-tertiary: #86868b;         /* Tertiary text (hints, footnotes) */

  /* ── Accent and semantic colors ── */
  --accent: #0071e3;                /* Primary brand color (Apple blue) */
  --accent-hover: #0077ed;          /* Accent color on hover (slightly brighter) */
  --success: #34c759;               /* Success green (iOS system green) */
  --success-bg: #e8f5e9;           /* Success background tint */
  --warning: #ff9f0a;               /* Warning amber (iOS system orange) */
  --warning-bg: #fff8e1;           /* Warning background tint */
  --error: #ff3b30;                 /* Error red (iOS system red) */
  --error-bg: #fce4ec;             /* Error background tint */

  /* ── Borders and shadows ── */
  --border: rgba(0, 0, 0, 0.06);   /* Subtle divider lines */
  --radius: 14px;                   /* Large border radius (cards, modals) */
  --radius-sm: 10px;                /* Small border radius (buttons, tags) */
  --shadow: 0 1px 4px rgba(0, 0, 0, 0.06);     /* Subtle card shadow */
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08); /* Elevated shadow (modals) */

  /* ── Typography ── */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SF Mono', Menlo, Consolas, monospace;

  /* ── Animation ── */
  --transition: 0.2s ease;          /* Default transition duration and easing */
}

/*
 * Dark Mode Overrides
 * Automatically activates when the user's OS is in dark mode.
 * Only color-related variables are overridden; layout variables stay the same.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;                  /* True black background (OLED-friendly) */
    --bg-card: #1c1c1e;            /* Dark card background (iOS dark mode grey) */
    --text: #f5f5f7;               /* Light text on dark background */
    --text-secondary: #a1a1a6;     /* Muted secondary text */
    --text-tertiary: #6e6e73;      /* Subtle tertiary text */
    --border: rgba(255, 255, 255, 0.08); /* Light borders on dark background */
    --shadow: 0 1px 4px rgba(0, 0, 0, 0.3);      /* Stronger shadow for depth */
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);  /* Stronger elevated shadow */
    --success-bg: #1b3a1b;         /* Dark success tint */
    --warning-bg: #3a2e10;         /* Dark warning tint */
    --error-bg: #3a1515;           /* Dark error tint */
  }
}

/* Apply the background color to the root element */
html { background: var(--bg); }

/* Base body typography and smoothing */
body {
  font-family: var(--font);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;                /* Ensure body fills the viewport */
  -webkit-font-smoothing: antialiased; /* Smoother font rendering on macOS */
}


/* ═══════════════════════════════════════════════════════════════════════════════
   2. LAYOUT
   Page-level container, header, main area, and footer.
   Uses flexbox column to push footer to the bottom.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Centered column container — constrains content to 640px max width */
.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;          /* Vertical stacking: header → main → footer */
}

/* App header — centered text above the dynamic content area */
.app-header { text-align: center; margin-bottom: 2rem; }
.app-title {
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;                     /* Space between icon and "AlbumDrop" text */
}
.app-icon { color: var(--text); flex-shrink: 0; } /* SVG icon inherits text color */
.app-subtitle { color: var(--text-secondary); font-size: 0.95rem; margin-top: 0.25rem; }


/* ═══════════════════════════════════════════════════════════════════════════════
   3. LEGAL LINKS
   Small Privacy Policy / Terms & Conditions links below the subtitle.
   Open modal overlays when clicked (handled by app.js).
   ═══════════════════════════════════════════════════════════════════════════════ */

.legal-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;                     /* Space between link, dot separator, link */
  margin-top: 0.5rem;
  font-size: 0.75rem;              /* Small, unobtrusive text */
}
.legal-link {
  color: var(--text-tertiary);     /* Subtle grey color */
  text-decoration: none;
  transition: color var(--transition);
}
.legal-link:hover { color: var(--accent); text-decoration: underline; }
.legal-sep { color: var(--text-tertiary); } /* "·" separator between links */


/* ═══════════════════════════════════════════════════════════════════════════════
   Main content area and footer
   ═══════════════════════════════════════════════════════════════════════════════ */

/* The <main id="app"> element fills available vertical space */
#app { flex: 1; }

/* Footer — privacy reassurance text with a top border separator */
.app-footer {
  text-align: center;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.app-footer p {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  max-width: 400px;
  margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   4. CARD
   The primary content container used on every screen.
   White background with rounded corners, shadow, and fade-in animation.
   ═══════════════════════════════════════════════════════════════════════════════ */

.card {
  background: var(--bg-card);
  border-radius: var(--radius);    /* 14px rounded corners */
  padding: 2rem;
  box-shadow: var(--shadow);
  animation: fadeIn 0.3s ease;     /* Subtle slide-up fade on screen transitions */
}


/* ═══════════════════════════════════════════════════════════════════════════════
   5. BUTTONS
   Button system with variants: primary, secondary, danger, Google, full-width.
   Each variant has distinct background, text color, and hover states.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Base button styles shared by all variants */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;                     /* Space between icon and text */
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm); /* 10px rounded corners */
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  text-decoration: none;
  line-height: 1.3;
}

/* Focus ring for keyboard navigation (accessibility) */
.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Primary button — solid blue background (main CTA) */
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { background: #999; cursor: not-allowed; opacity: 0.7; }

/* Secondary button — outlined with blue border (alternative action) */
.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.btn-secondary:hover { background: rgba(0, 113, 227, 0.06); }

/* Danger button — outlined with red border (destructive action like cancel) */
.btn-danger {
  background: transparent;
  color: var(--error);
  border: 1.5px solid var(--error);
}
.btn-danger:hover { background: rgba(255, 59, 48, 0.06); }

/* Full-width modifier — stretches button to fill its container */
.btn-full { width: 100%; }

/* Google sign-in button — white/grey background matching Google's brand guidelines */
.btn-google {
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  font-weight: 500;
}
.btn-google:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

/* Dark mode overrides for the Google button */
@media (prefers-color-scheme: dark) {
  .btn-google { background: #2c2c2e; color: #f5f5f7; border-color: #444; }
  .btn-google:hover { background: #3a3a3c; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   6. DROP ZONE
   The drag-and-drop file selection area on the WELCOME screen.
   Features a dashed border that turns solid blue on hover/drag.
   ═══════════════════════════════════════════════════════════════════════════════ */

.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

/* Hover and drag-over states — blue accent border with subtle background tint */
.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(0, 113, 227, 0.04);
}
/* Extra emphasis when actively dragging a file over the zone */
.drop-zone.drag-over {
  border-style: solid;             /* Dashed → solid when file is being dragged */
  transform: scale(1.01);         /* Subtle scale-up for visual feedback */
}

/* Drop zone icon — the overlapping photo frames SVG */
.drop-zone-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  color: var(--text-tertiary);     /* Grey by default */
  transition: color var(--transition);
}
/* Icon turns blue on hover/drag to match the border */
.drop-zone:hover .drop-zone-icon,
.drop-zone.drag-over .drop-zone-icon { color: var(--accent); }

/* Text elements within the drop zone */
.drop-zone-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.35rem; }
.drop-zone-hint { font-size: 0.85rem; color: var(--text-secondary); }

/* Hide the native file input — it's triggered programmatically via click */
.drop-zone input[type="file"] { display: none; }

/* Error message area within the drop zone (wrong file type, etc.) */
.drop-zone-error {
  margin-top: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--error-bg);
  color: var(--error);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  display: none;                   /* Hidden by default */
}
.drop-zone-error.visible { display: block; } /* Shown via JS class toggle */


/* ═══════════════════════════════════════════════════════════════════════════════
   6b. APP STORE PROMO SECTION
   Promotional section below the drop zone on the WELCOME screen.
   Encourages users to download the AlbumDrop native app for Apple platforms.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Container — sits below the drop zone card with top margin */
.promo-section {
  margin-top: 2rem;
  text-align: center;
  padding: 0 0.5rem;
}

/* Decorative icon above the promo text */
.promo-icon {
  color: var(--text-tertiary);
  margin-bottom: 0.5rem;
}

/* "Get the AlbumDrop App" heading */
.promo-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Descriptive blurb about what the app does */
.promo-blurb {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 440px;
  margin: 0 auto 1.25rem;
}

/* Container for the two store badges — side by side */
.promo-badges {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;                 /* Stack vertically on very narrow screens */
}

/*
 * App Store badge button — styled to resemble Apple's official badges.
 * Dark background with white text, rounded corners, Apple logo icon.
 */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem 0.55rem 0.75rem;
  background: #000;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.store-badge:hover { opacity: 0.85; }

/* Apple logo icon within the badge */
.store-badge-icon {
  flex-shrink: 0;
  color: #fff;
}

/* Text stack within the badge (two lines) */
.store-badge-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.1;
}
/* "Download on the" — small top line */
.store-badge-small {
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  opacity: 0.9;
}
/* "App Store" / "Mac App Store" — larger bottom line */
.store-badge-large {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Dark mode — invert badge to light background */
@media (prefers-color-scheme: dark) {
  .store-badge {
    background: #fff;
    color: #000;
    border-color: rgba(0, 0, 0, 0.1);
  }
  .store-badge-icon { color: #000; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   7. VALIDATION CHECKLIST
   The 7-step validation checklist on the VALIDATING screen.
   Each item transitions through visual states: pending → running → pass/fail/warn.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Title above the checklist */
.validation-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 1.25rem; }

/* Remove default list styling (no bullets) */
.check-list { list-style: none; }

/* Individual checklist item — icon + label in a row with a bottom border */
.check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary);    /* Default: grey text (pending state) */
  border-bottom: 1px solid var(--border);
}
.check-item:last-child { border-bottom: none; } /* No border on the last item */

/* State-specific text colors */
.check-item.active { color: var(--text); }       /* Currently running — dark text */
.check-item.passed { color: var(--success); }    /* Passed — green text */
.check-item.failed { color: var(--error); }      /* Failed — red text */

/* Icon container — fixed width to align all labels consistently */
.check-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Spinning animation for the "running" state icon */
.check-icon .spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent); /* Blue top segment creates the spinning effect */
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* SVG icon color overrides for pass/fail states */
.check-icon .checkmark { color: var(--success); } /* Green checkmark */
.check-icon .xmark { color: var(--error); }       /* Red X mark */

/* Error message box (shown below checklist on validation failure) */
.validation-error {
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--error-bg);
  color: var(--error);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   8. SUMMARY SCREEN
   File statistics grid, folder handling options, and important notes.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Metadata line (e.g. "From Brian's iPhone · Feb 24, 2026") */
.summary-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

/* Stats grid — 2×2 grid of stat cards (photos, videos, albums, size) */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* Two equal columns */
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--bg);           /* Slightly different from card background */
  border-radius: var(--radius-sm);
  padding: 1rem;
  text-align: center;
}
.stat-value { font-size: 1.5rem; font-weight: 700; }           /* Big number */
.stat-label { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.15rem; } /* Label below */

/* Horizontal divider between stats and folder options */
.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}

/* Folder handling section (radio buttons for prepend/ignore) */
.folder-section h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.75rem; }
.radio-group { display: flex; flex-direction: column; gap: 0.6rem; }
.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.radio-option input[type="radio"] {
  margin-top: 0.2rem;
  accent-color: var(--accent);     /* Blue radio button color */
}
/* Monospace example text below each radio option */
.radio-example {
  display: block;
  font-size: 0.8rem;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 0.2rem;
}

/* "Important notes" section — always visible (not collapsible) */
.limitations {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--text-tertiary);
  line-height: 1.6;
}
.limitations h3 {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

/* Action buttons container (Sign in + Choose Different File) */
.summary-actions { margin-top: 1.5rem; }


/* ═══════════════════════════════════════════════════════════════════════════════
   9. UPLOAD PROGRESS
   Progress bar, speed/ETA display, current file indicator, and warning banner.
   All elements are updated via direct DOM manipulation (not re-rendering).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* "Uploading to Google Photos" title */
.upload-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.25rem; }

/* Phase label (e.g. "Uploading… 12 of 156 files") */
.upload-phase {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
  font-weight: 500;
}

/* Progress bar container — grey rounded track */
.progress-bar-container {
  background: var(--bg);
  border-radius: 6px;
  height: 10px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
/* Progress bar fill — blue bar that grows from left to right */
.progress-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
  transition: width 0.3s ease;     /* Smooth width animation on each update */
  min-width: 0;
}

/* Stats line below progress bar (percentage on left, speed/ETA on right) */
.progress-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

/* Current file name display — shows which file is being uploaded */
.current-file {
  font-size: 0.85rem;
  color: var(--text);
  padding: 0.75rem 1rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
  word-break: break-all;           /* Break long filenames without spaces */
  min-height: 2.5rem;
  display: flex;
  align-items: center;
}

/* Warning banner (shown for missing files, etc.) */
.upload-warning {
  padding: 0.6rem 0.85rem;
  background: var(--warning-bg);
  color: var(--warning);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Optional spinner variant for the warning banner */
.upload-warning .spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 159, 10, 0.3);
  border-top-color: var(--warning);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  flex-shrink: 0;
}

/* Cancel button container — centered below the progress area */
.upload-actions {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   10. RESULTS SCREEN (COMPLETE)
   Upload results display with statistics rows, failed/album lists.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Large emoji icon at the top (✅, ⚠️, or 🚫) */
.results-icon {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 0.75rem;
}

/* Result title (e.g. "Import to Google Photos Complete") */
.results-title {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Subtitle below title (e.g. "156 files uploaded successfully.") */
.results-subtitle {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

/* Statistics rows container */
.results-stats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Individual stat row (label on left, value on right) */
.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.result-row:last-child { border-bottom: none; }
.result-value { font-weight: 600; }
.result-value.success { color: var(--success); } /* Green for successful counts */
.result-value.error { color: var(--error); }     /* Red for failed counts */

/* Expandable section for failed files (click "X failed file(s)" to expand) */
.failed-details {
  margin-top: 1rem;
}
.failed-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--error);
  font-weight: 500;
  padding: 0.5rem 0;
}
.failed-list {
  list-style: none;
  margin-top: 0.5rem;
}
.failed-item {
  font-size: 0.8rem;
  padding: 0.4rem 0;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.failed-item:last-child { border-bottom: none; }

/* Expandable section for created albums (click "X album(s) created" to expand) */
.results-albums {
  margin-top: 1rem;
}
.results-albums summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 0.5rem 0;
}
.album-list {
  list-style: none;
  margin-top: 0.5rem;
}
.album-list li {
  font-size: 0.8rem;
  padding: 0.35rem 0;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.album-list li:last-child { border-bottom: none; }

/* Action buttons (Open Google Photos + Import Another File) */
.results-actions {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   11. ANIMATIONS
   Keyframe definitions for reusable animations.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Fade-in with subtle upward slide — used for screen transitions */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Continuous rotation — used for spinner icons */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Pulsing opacity — available for loading states (currently unused) */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   12. RE-AUTH BANNER
   Warning banner shown when the OAuth token expires during an active upload.
   Contains a message and "Re-authenticate with Google" button.
   ═══════════════════════════════════════════════════════════════════════════════ */

.reauth-banner {
  padding: 1rem;
  background: var(--warning-bg);
  border-radius: var(--radius-sm);
  text-align: center;
  margin-bottom: 1rem;
  animation: fadeIn 0.3s ease;     /* Fades in when token expires */
}
.reauth-banner p {
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 0.75rem;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   13. MODAL OVERLAY
   Full-screen modal for displaying legal documents (Privacy Policy, Terms).
   Consists of a semi-transparent backdrop, a centered card, and scrollable body.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Full-screen semi-transparent backdrop */
.modal-overlay {
  position: fixed;
  inset: 0;                        /* Shorthand for top/right/bottom/left: 0 */
  background: rgba(0, 0, 0, 0.5); /* 50% black overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;                   /* Above all other content */
  padding: 1.5rem;
  animation: fadeIn 0.2s ease;
}

/* Modal card — the white/dark panel containing the content */
.modal-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;                /* Limit height to 80% of viewport */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Modal header — title and close button in a row */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;                  /* Don't shrink when body scrolls */
}
.modal-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
}

/* Close button (×) — minimal styling for an unstyled button */
.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0.25rem;
  line-height: 1;
  transition: color var(--transition);
}
.modal-close:hover { color: var(--text); }

/* Modal body — scrollable content area for the legal document */
.modal-body {
  padding: 1.5rem;
  overflow-y: auto;                /* Scrollbar for long documents */
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
/* Paragraph spacing within the legal document */
.modal-body p { margin-bottom: 1rem; }
.modal-body p:last-child { margin-bottom: 0; }
/* Subheading styles */
.modal-body h3 { color: var(--text); margin: 1.25rem 0 0.5rem; font-size: 0.95rem; }
/* List styles */
.modal-body ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.modal-body li { margin-bottom: 0.35rem; }

/* Loading/error placeholder text (centered) */
.modal-placeholder {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-tertiary);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   14. RESPONSIVE BREAKPOINTS
   Adjustments for mobile screens (≤480px viewport width).
   Reduces padding, font sizes, and simplifies layouts.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .container { padding: 1.5rem 1rem 2rem; }        /* Reduce side padding */
  .card { padding: 1.5rem; }                        /* Tighter card padding */
  .drop-zone { padding: 2rem 1.5rem; }              /* Smaller drop zone */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; } /* Tighter grid */
  .stat-card { padding: 0.75rem; }                  /* Smaller stat cards */
  .stat-value { font-size: 1.25rem; }               /* Slightly smaller numbers */
  .progress-stats { flex-direction: column; gap: 0.25rem; } /* Stack speed/ETA */
  .promo-badges { flex-direction: column; align-items: center; } /* Stack badges */
  .store-badge { width: 100%; max-width: 200px; justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   15. ACCESSIBILITY
   Reduced motion support and screen reader utilities.
   ═══════════════════════════════════════════════════════════════════════════════ */

/*
 * Reduced Motion
 * When the user has "prefers-reduced-motion" enabled in their OS settings,
 * all animations and transitions are effectively disabled. This prevents
 * motion-sensitive users from experiencing discomfort.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;     /* Near-zero, not zero (avoids bugs) */
    transition-duration: 0.01ms !important;
  }
}

/*
 * Screen Reader Only
 * Visually hides an element while keeping it accessible to screen readers.
 * Used for adding descriptive text that sighted users don't need to see
 * but screen reader users benefit from.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}