/* ============================================================
   global.css — Reset & Base Layout Rules
   LapTrack · Phase 1
   Import after tokens.css, before any screen stylesheet.
   ============================================================ */

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

/* ----------------------------------------------------------
   Margin / padding reset
   ---------------------------------------------------------- */
html,
body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li,
figure, figcaption,
blockquote, dl, dd {
  margin:  0;
  padding: 0;
}

/* ----------------------------------------------------------
   Root & body — full viewport, OLED true-black
   ---------------------------------------------------------- */
html {
  height: 100%;
  /* Smooth scrolling only where screens scroll; not the root */
  scroll-behavior: auto;
  /* Prevent pull-to-refresh on browsers that check the html element */
  overscroll-behavior: none;
}

body {
  height:           100%;
  min-height:       100dvh;
  background-color: var(--color-bg);
  color:            var(--color-text-primary);
  font-family:      var(--font-ui);
  font-size:        1rem;
  line-height:      1.5;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent pull-to-refresh interfering with the lap timer */
  overscroll-behavior: none;
}

/* ----------------------------------------------------------
   Lists — remove default decoration
   ---------------------------------------------------------- */
ul, ol {
  list-style: none;
}

/* ----------------------------------------------------------
   Images / media
   ---------------------------------------------------------- */
img,
video,
canvas {
  display:   block;
  max-width: 100%;
}

/* ----------------------------------------------------------
   Button reset — no browser chrome; apply visuals in components
   ---------------------------------------------------------- */
button {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  /* Minimum glove-friendly touch target */
  min-width:  48px;
  min-height: 48px;
  padding:         0;
  margin:          0;
  border:          none;
  border-radius:   0;
  background:      transparent;
  color:           inherit;
  font-family:     var(--font-ui);
  font-size:       1rem;
  font-weight:     700;
  line-height:     1;
  text-transform:  uppercase;
  letter-spacing:  0.06em;
  cursor:          pointer;
  user-select:     none;
  -webkit-tap-highlight-color: transparent;
}

button:active {
  opacity:   0.85;
  transform: scale(0.97);
}

/* ----------------------------------------------------------
   Input reset
   ---------------------------------------------------------- */
input,
textarea,
select {
  font-family: var(--font-ui);
  font-size:   1rem;
  color:       var(--color-text-primary);
  border:      none;
  outline:     none;
  background:  transparent;
}

/* ----------------------------------------------------------
   Anchor reset
   ---------------------------------------------------------- */
a {
  color:           inherit;
  text-decoration: none;
}

/* ----------------------------------------------------------
   Enforce the HTML `hidden` attribute — prevents display
   overrides from component-level CSS from making hidden
   sections visible. [hidden] must always win.
   ---------------------------------------------------------- */
[hidden] {
  display: none !important;
}

/* ----------------------------------------------------------
   Stub screen layout (History / Settings placeholders)
   ---------------------------------------------------------- */
.stub-header {
  display:     flex;
  align-items: center;
  gap:         var(--space-3, 12px);
  padding:     var(--space-4, 16px);
  border-bottom: 1px solid var(--color-border, #333);
}

.stub-title {
  font-size:   1.25rem;
  font-weight: 700;
}

.stub-back-btn {
  font-size:   1rem;
  padding:     var(--space-2, 8px) var(--space-3, 12px);
  color:       var(--color-accent, #C6FF00);
}

.stub-body {
  padding: var(--space-4, 16px);
  color:   var(--color-text-secondary, #888);
}

/* ----------------------------------------------------------
   Utility: visually hidden (accessible label helper)
   ---------------------------------------------------------- */
.visually-hidden {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}