/* style.css */

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  touch-action: manipulation;   /* disable pinch-zoom/overscroll */
  overflow-x: hidden;           /* prevent horizontal scrolling */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #000;
  font-family: sans-serif;
  text-align: center;
  box-sizing: border-box;
}

#clock {
  font-family: monospace;
  /* Responsive sizing:
     - never smaller than 1.5rem (~24px)
     - ideally 8vw (so 360px viewport → ~29px)
     - up to 12rem for large screens */
  font-size: clamp(1.5rem, 14vw, 12rem);
  white-space: nowrap;
  user-select: none;
  margin-bottom: 0.5em;
  width: 90vw;      /* ensure it can scale within the viewport */
  overflow: hidden;
  font-weight: bold;
}

/* 12/24-hour toggle row */
#format-toggle {
  display: flex;
  align-items: center;
  font-size: clamp(1rem, 4vw, 1.5rem);
  margin-bottom: 1em;         /* spacing below toggle */
}

.toggle-option {
  cursor: pointer;
  padding: 0.2em 0.5em;
}

.toggle-option.active {
  font-weight: bold;
  text-decoration: underline;
}

.toggle-separator {
  margin: 0 0.3em;
  user-select: none;
}

/* Date, week, and time-zone lines */
#date,
#week,
#tz {
  margin: 0.2em 0;
  font-size: clamp(1rem, 4vw, 1.5rem);
}