/* ==========================================================================
   TouchTo — Base Styles
   ========================================================================== */

html {
  font-size: 16px;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  /* iPad / iOS touch tuning */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation; /* removes 300ms tap delay on Safari */
  -webkit-user-select: none;
  user-select: none;
}

/* Allow text selection in input fields and editable areas */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* Buttons: ensure they're touch-friendly + clickable */
button, .btn, [role="button"], .toggle, .profile-card, .activity-card {
  cursor: pointer;
  touch-action: manipulation;
  min-height: 44px; /* Apple HIG minimum */
}

/* Activity-runner canvas explicitly accepts pointer events */
.runner-canvas {
  touch-action: none; /* prevent browser gestures stealing the input */
  cursor: pointer;
}

/* PWA Standalone Mode — when installed on Home Screen */
@media all and (display-mode: standalone) {
  body {
    /* Avoid bouncy scroll on iOS standalone */
    overscroll-behavior: none;
    -webkit-touch-callout: none;
  }
  /* Add safe-area padding for notched devices in standalone */
  .screen, .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  /* Hide any browser-chrome-only UI when standalone */
  .browser-only { display: none !important; }
  /* Slightly larger touch targets in standalone (often used on tablets) */
  .btn, .toggle, .nav-item { min-height: 48px; }
}

/* Window-controls overlay (Edge / Chromium PWA) — leave room for title bar */
@media all and (display-mode: window-controls-overlay) {
  body { padding-top: env(titlebar-area-height, 32px); }
}

/* ── Typography ── */

h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p {
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
}

small {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── Links ── */

a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Focus Styles (Global) ── */

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
[role="link"]:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* High-contrast focus for dark backgrounds */
.pause-overlay :focus-visible,
.help-overlay :focus-visible,
.calibration-overlay :focus-visible {
  outline-color: #ffffff;
}

/* ── Selection ── */

::selection {
  background-color: var(--color-primary-bg);
  color: var(--color-primary-dark);
}

/* ── App Layout ── */

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
}

#app-content {
  flex: 1;
  padding: var(--space-4);
  padding-bottom: calc(var(--space-16) + var(--space-4));
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* ── Fullscreen Activity Container ── */

#activity-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: var(--color-bg);
  display: none;
}

#activity-fullscreen.active {
  display: block;
}

#activity-fullscreen canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Scrollbar Styling ── */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-surface-alt);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ── Skip Link ── */

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 12px 24px;
  background: var(--color-primary);
  color: white;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
}

.skip-link:focus {
  top: 0;
}

/* ── Utility Classes ── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary-dark); }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

/* ── Aria Live Regions ── */

[aria-live] {
  position: relative;
}

/* ── Cursor: Touch-Apps verwenden keinen Custom-Cursor ── */

/* Falls .gaze-cursor irgendwo gesetzt wird: beim Touch-Modus ausblenden */
.gaze-cursor {
  /* Alias erhalten — kein direktes display:none hier, damit Eye-Tracking-Modus
     weiterhin funktioniert. Blendet sich via .touch-cursor selbst aus, wenn
     die App im Touch-Modus läuft. */
}

/* Bei Touch-Apps wird kein Custom-Cursor angezeigt.
   Tap-Feedback erfolgt über den nativen Browser-Tap-Highlight
   und den .tap-ring Animations-Ring (via JS injiziert). */
.touch-cursor {
  display: none !important; /* kein Custom-Cursor bei Touch */
}

/* Subtiler Tap-Feedback-Ring (wird per JS als .tap-ring-el injiziert) */
@keyframes tapRingExpand {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0.8; }
  80%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
}

.tap-ring-el {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2.5px solid rgba(75, 105, 140, 0.7);
  background: rgba(75, 105, 140, 0.08);
  animation: tapRingExpand 0.38s ease-out forwards;
}