/* Base reset + global typography */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Prevent any element from causing horizontal overflow */
  max-width: 100%;
}

/* Allow specific elements to exceed parent width when needed */
img, svg, video {
  max-width: 100%;
  height: auto;
}

html {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
  /* Prevent horizontal overflow on all devices */
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  /* iOS Safari: prevent zoom on input focus */
  -webkit-text-size-adjust: 100%;
  position: relative;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 28px; letter-spacing: -0.02em; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }

p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }

button { font-family: inherit; cursor: pointer; }
input, textarea, select, button { font-family: inherit; font-size: inherit; color: inherit; }
input:focus, textarea:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

ul { padding-left: 18px; margin: 0; }
li { margin: 2px 0; }

/* Prevent text overflow on narrow screens */
h1, h2, h3, h4, h5, h6 { word-wrap: break-word; overflow-wrap: break-word; }
p { word-wrap: break-word; overflow-wrap: break-word; }

::selection { background: var(--accent-soft); color: var(--text-primary); }

/* Scrollbars (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-soft); }
::-webkit-scrollbar-track { background: transparent; }

.mono { font-family: var(--font-mono); }

.skeleton { background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--radius-md); }
.skeleton-block { height: 200px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Site-wide footer. Sits at the bottom of every page. */
.site-footer {
  padding: 16px 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-soft);
  background: var(--bg-elev);
}
.site-footer .footer-handle {
  font-weight: 600;
  color: var(--text-secondary);
}
.site-footer .footer-sep { margin: 0 6px; opacity: .5; }

/* When the footer lives inside the app shell, it should span the main column
   and not float above content. */
.app-main .site-footer { margin-top: auto; }
.app-main { display: flex; flex-direction: column; min-height: 100vh; }
.app-main .view-host { flex: 1; }

/* ─── Motion polish (additive) ──────────────────────────────────
   Global micro-interactions. Transform/opacity only. */

/* Links get a gentle color transition on hover. */
a { transition: color var(--transition); }

/* Focus rings animate in smoothly rather than snapping. */
input, textarea, select, button {
  transition: outline-color var(--transition);
}

/* Footer handle: subtle lift affordance. */
.site-footer .footer-handle { transition: color var(--transition); }

@media (prefers-reduced-motion: reduce) {
  /* Neutralize decorative motion site-wide. The skeleton shimmer is
     an ambient loop, so pause it here too. */
  a,
  input, textarea, select, button,
  .site-footer .footer-handle { transition: none; }
  .skeleton { animation: none; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
}