/* ============================================================
   home.css — Home / Launch Screen Styles
   LapTrack · Phase 1
   Scoped to #screen-home only. Requires tokens.css + global.css.
   ============================================================ */

/* ----------------------------------------------------------
   Screen root — full-height vertical flex column
   ---------------------------------------------------------- */
#screen-home {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  align-items:     stretch;
  min-height:      100dvh;
  padding:
    calc(var(--space-12) + env(safe-area-inset-top))
    var(--space-4)
    calc(var(--space-6) + env(safe-area-inset-bottom))
    var(--space-4);
  background-color: #000000;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><g stroke='%230D2B0D' stroke-width='0.4' fill='none' opacity='0.8'><line x1='0' y1='50' x2='200' y2='50'/><line x1='0' y1='100' x2='200' y2='100'/><line x1='0' y1='150' x2='200' y2='150'/><line x1='50' y1='0' x2='50' y2='200'/><line x1='100' y1='0' x2='100' y2='200'/><line x1='150' y1='0' x2='150' y2='200'/></g><g stroke='%230D2B0D' stroke-width='1.5' fill='none' stroke-linecap='square'><polyline points='0,25 55,25'/><polyline points='75,25 95,25'/><polyline points='125,15 165,15 165,50'/><polyline points='185,15 200,15'/><polyline points='0,75 35,75 35,100'/><polyline points='115,75 145,75 145,90 175,90 175,100'/><polyline points='25,150 25,175 80,175'/><polyline points='120,170 160,170 160,150'/><polyline points='180,150 180,200'/><polyline points='0,160 15,160'/><polyline points='60,200 60,185 100,185'/><polyline points='200,125 185,125 185,110 170,110'/><polyline points='50,200 50,190 65,190 65,175'/></g><g fill='%230D2B0D' stroke='none'><circle cx='55' cy='25' r='3.5'/><circle cx='75' cy='25' r='3.5'/><circle cx='95' cy='25' r='2.5'/><circle cx='165' cy='15' r='3.5'/><circle cx='165' cy='50' r='3'/><circle cx='185' cy='15' r='2.5'/><circle cx='35' cy='75' r='3.5'/><circle cx='35' cy='100' r='3'/><circle cx='145' cy='75' r='3.5'/><circle cx='145' cy='90' r='2.5'/><circle cx='175' cy='90' r='3.5'/><circle cx='175' cy='100' r='3'/><circle cx='25' cy='150' r='3'/><circle cx='25' cy='175' r='3.5'/><circle cx='80' cy='175' r='2.5'/><circle cx='120' cy='170' r='2.5'/><circle cx='160' cy='170' r='3.5'/><circle cx='160' cy='150' r='3'/><circle cx='180' cy='150' r='3.5'/><circle cx='15' cy='160' r='2.5'/><circle cx='60' cy='185' r='3.5'/><circle cx='100' cy='185' r='2.5'/><circle cx='185' cy='125' r='3.5'/><circle cx='185' cy='110' r='2.5'/><circle cx='170' cy='110' r='2.5'/><circle cx='50' cy='190' r='2.5'/><circle cx='65' cy='190' r='2.5'/><circle cx='65' cy='175' r='2.5'/><rect x='44' y='19' width='8' height='12' rx='1.5'/><rect x='84' y='19' width='8' height='12' rx='1.5'/><rect x='37' y='87' width='12' height='22' rx='1.5'/><rect x='93' y='68' width='12' height='13' rx='1.5'/><rect x='78' y='168' width='24' height='12' rx='1.5'/><rect x='155' y='60' width='12' height='8' rx='1'/><rect x='155' y='72' width='12' height='8' rx='1'/></g></svg>");
  background-size: 200px 200px;
  background-repeat: repeat;
  gap: var(--space-6);
}

/* ----------------------------------------------------------
   Gear / settings button — fixed top-right corner
   ---------------------------------------------------------- */
.home-gear-btn {
  position:   absolute;
  top:        calc(var(--space-4) + env(safe-area-inset-top));
  right:      var(--space-4);
  width:      48px;
  height:     48px;
  min-width:  48px;
  min-height: 48px;
  border-radius: var(--radius-md);
  color:      var(--color-text-secondary);
  /* Expand the visual by centering the icon inside the hit area */
  padding:    0;
}

.home-gear-btn:active {
  color: var(--color-text-primary);
}

.home-gear-btn svg {
  width:  24px;
  height: 24px;
  stroke: currentColor;
  fill:   none;
}

/* ----------------------------------------------------------
   App title / logo area
   ---------------------------------------------------------- */
.home-title-area {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-2);
  padding-top:     var(--space-2);
}

.home-title {
  font-size:      1.5rem;
  font-weight:    700;
  color:          var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align:     center;
}

.home-title span {
  color: var(--color-accent);
}

.home-subtitle {
  font-size:  0.875rem;
  color:      var(--color-text-secondary);
  text-align: center;
}

/* ----------------------------------------------------------
   Profile form — input field group
   ---------------------------------------------------------- */
.home-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.home-field {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.home-field label {
  font-size:      0.75rem;
  font-weight:    700;
  color:          var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home-field input {
  width:            100%;
  min-height:       48px;
  padding:          var(--space-2) var(--space-3);
  background-color: var(--color-surface-raised);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-sm);
  color:            var(--color-text-primary);
  font-size:        1rem;
  font-family:      var(--font-ui);
  line-height:      1.5;
  transition:       border-color 120ms ease, box-shadow 120ms ease;
}

.home-field input::placeholder {
  color: var(--color-text-muted);
}

.home-field input:focus {
  outline:    none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}

/* ----------------------------------------------------------
   Clear fields button
   ---------------------------------------------------------- */
#btn-clear-fields {
  align-self:       flex-end;
  padding:          var(--space-1) var(--space-3);
  background-color: transparent;
  color:            var(--color-text-secondary);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-sm);
  font-size:        0.75rem;
  font-weight:      600;
  text-transform:   uppercase;
  letter-spacing:   0.06em;
  min-height:       32px;
}

#btn-clear-fields:active {
  color:        var(--color-text-primary);
  border-color: var(--color-text-secondary);
  opacity:      0.85;
}

/* ----------------------------------------------------------
   Navigation buttons
   ---------------------------------------------------------- */
.home-nav {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  margin-top:     auto; /* push to bottom if content is short */
}

/* Primary CTA — "Start New Session" */
.btn-start-session {
  width:            100%;
  min-height:       64px;
  padding:          var(--space-4) var(--space-8);
  background-color: var(--color-accent);
  color:            #000000;
  border-radius:    var(--radius-lg);
  font-size:        1.125rem;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   0.06em;
}

.btn-start-session:active {
  background-color: var(--color-accent-dim);
  opacity:          0.85;
  transform:        scale(0.97);
}

/* Secondary / Ghost — "View History" */
.btn-view-history {
  width:            100%;
  min-height:       48px;
  padding:          var(--space-3) var(--space-6);
  background-color: transparent;
  color:            var(--color-text-primary);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-md);
  font-size:        1rem;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   0.06em;
}

.btn-view-history:active {
  border-color: var(--color-text-secondary);
  opacity:      0.85;
  transform:    scale(0.97);
}