:root {
  /* Light theme */
  --bg: #ffffff;            /* page background (surrounding) */
  --panel: #ffffff;         /* inner panels */
  --text: #0b1020;          /* main text */
  --muted: #475569;         /* subdued text */
  --accent: #2563eb;        /* blue accents */
  --success: #1db954;
  --error: #ff4d4f;
  --warning: #ffb020;
}

/* Global resets (body, fonts) are in main.css; keep component-only styling here */

/* Prevent mobile auto text resizing that can change sizes while typing */
html { 
  -webkit-text-size-adjust: 100%; 
  text-size-adjust: 100%;
  overflow: hidden; /* lock down scrolling */
  height: 100%;
  width: 100%;
}

body {
  overflow: hidden; /* prevent any scrolling */
  height: 100vh;
  width: 100vw;
  position: fixed; /* completely lock the page */
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}

.app {
  position: relative; /* anchor timer inside the card */
  max-width: 760px;
  margin: 4rem auto;
  padding: 2rem;
  background: #dbeafe; /* light blue stopwatch area */
  border: 1px solid #93c5fd;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow: hidden; /* prevent internal scrolling */
  max-height: calc(100vh - 8rem); /* fit within viewport minus margins */
  box-sizing: border-box;
}

.title { margin-top: 0; text-align: center; letter-spacing: 0.3px; font-size: 2rem; }

.display { display: grid; gap: 1rem; }
.pi-line {
  position: relative;          /* allow prefix overlay */
  display: block;
  padding: 1.4rem 1.6rem !important;      /* fixed buffer to avoid changes */
  background: var(--panel);
  border: 1px solid #bfdbfe; /* lighter blue border */
  border-radius: 12px;
  width: 100% !important;               /* fill card width */
  box-sizing: border-box;     /* include padding and border in width to avoid overflow */
}
.pi-prefix-row {
  display: block;
  width: 100%;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 2.2rem;    /* fixed to prevent viewport-induced changes */
  line-height: 1.1;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.pi-prefix {
  position: absolute;
  top: 0.8rem;                /* align with container padding top */
  left: 1rem;                 /* align with container padding left */
  pointer-events: none;       /* don't block typing */
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 2.2rem;          /* stable */
  line-height: 2.6rem;
  color: var(--muted);
}

.pi-input {
  display: block;
  width: min(100%, calc(25ch + 8px)); /* match content width and center */
  margin: 0 auto;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1.8rem !important;       /* fixed stable size */
  line-height: 2.2rem !important;     /* fixed line height */
  height: calc(2.2rem * 4 + 10px) !important;  /* exactly 4 lines */
  text-align: center;               /* center digits in each line */
  outline: none;
  caret-color: var(--accent);
  resize: none;
  white-space: pre;              /* no auto wrap; we insert newlines */
  box-sizing: border-box;
  padding-left: 0; /* prefix is a separate row */
  overflow-x: hidden; /* prevent horizontal scroll */
}
.pi-input::placeholder { color: #6b7596; }

.app .timer {
  position: absolute;
  top: 2rem;     /* fixed offsets for stability */
  right: 3rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on;
  font-weight: 800;
  font-size: 1.25rem; /* stable size */
  letter-spacing: 0.5px;
}

/* Override global #timer flex rules from main.css (used by other pages) */
.app #timer {
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
}

.status {
  text-align: center;
  min-height: 2rem;
  font-weight: 700;
  font-size: 1.25rem;
}

.controls { display: flex; justify-content: center; }
.btn {
  padding: 0.5rem 1rem; /* stable reset size */
  background: #1a2656;
  color: #ffffff; /* ensure reset text is white */
  border: 1px solid #24357d;
  border-radius: 10px;
  cursor: pointer;
}
.btn:hover { background: #21306f; }

/* Move the reset button to the upper-left of the blue card */
.app .controls {
  position: absolute;
  top: 2rem;     /* fixed offsets for stability */
  left: 3rem;
  justify-content: flex-start; /* align button to left */
}

.flash-success { animation: flashSuccess 0.8s ease-in-out 0s 2; }
.flash-error { animation: flashError 0.6s ease-in-out 0s 3; }

@keyframes flashSuccess {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29,185,84,0); }
  50% { box-shadow: 0 0 0 6px rgba(29,185,84,0.35); }
}

@keyframes flashError {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,79,0); }
  50% { box-shadow: 0 0 0 6px rgba(255,77,79,0.4); }
}

.success-text { color: var(--success); }
.error-text { color: var(--error); }

.help { margin-top: 1rem; color: var(--muted); }
.help code { color: var(--text); word-break: break-all; }

/* Media queries to force smaller fonts on narrow screens so 25 digits always fit per row */
@media (max-width: 520px) {
  .pi-input {
    font-size: clamp(0.5rem, 2.5vw, 1.0rem) !important;
    line-height: 1.05 !important;
    height: calc(1.05em * 4 + 4px) !important;
    width: min(100%, calc(25ch + 6px)) !important;
  }
  .pi-prefix-row {
    font-size: clamp(0.7rem, 2.2vw, 1.2rem) !important;
  }
  
  /* Prevent overlapping on narrow screens */
  .title {
    font-size: 1.4rem !important;
    margin-bottom: 0.5rem !important;
  }
  .app .timer {
    top: 1rem !important;
    right: 1rem !important;
    font-size: 1rem !important;
  }
  .app .controls {
    top: 1rem !important;
    left: 1rem !important;
  }
  .btn {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.8rem !important;
  }
}

@media (max-width: 400px) {
  .pi-input {
    font-size: clamp(0.4rem, 2.0vw, 0.8rem) !important;
    line-height: 1.0 !important;
    height: calc(1.0em * 4 + 3px) !important;
    padding: 1px 2px !important;
    width: min(100%, calc(25ch + 4px)) !important;
  }
  .pi-prefix-row {
    font-size: clamp(0.5rem, 1.8vw, 1.0rem) !important;
    margin-bottom: 0.1rem !important;
  }
  
  /* More aggressive repositioning for very narrow screens */
  .title {
    font-size: 1.2rem !important;
    margin-bottom: 0.3rem !important;
  }
  .app .timer {
    top: 0.5rem !important;
    right: 0.5rem !important;
    font-size: 0.8rem !important;
  }
  .app .controls {
    top: 0.5rem !important;
    left: 0.5rem !important;
  }
  .btn {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.7rem !important;
  }
}

@media (max-width: 320px) {
  .pi-input {
    font-size: clamp(0.35rem, 1.8vw, 0.7rem) !important;
    line-height: 0.95 !important;
    height: calc(0.95em * 4 + 2px) !important;
    padding: 1px !important;
    width: min(100%, calc(25ch + 2px)) !important;
  }
  .pi-prefix-row {
    font-size: clamp(0.4rem, 1.6vw, 0.9rem) !important;
    margin-bottom: 0.05rem !important;
  }
  
  /* Ultra-narrow screen layout adjustments */
  .title {
    font-size: 1rem !important;
    margin-bottom: 0.2rem !important;
  }
  .app .timer {
    top: 0.3rem !important;
    right: 0.3rem !important;
    font-size: 0.7rem !important;
  }
  .app .controls {
    top: 0.3rem !important;
    left: 0.3rem !important;
  }
  .btn {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.6rem !important;
  }
  .app {
    padding: 1rem !important;
    margin: 1rem auto !important; /* reduce margins on ultra-narrow */
    max-height: calc(100vh - 2rem) !important; /* fit within smaller viewport */
  }
}