/*
 * The timer pages (/tools/<n>-minute-timer, /ja/tools/<n>-minute-timer).
 * Loaded after style.css and home-3.css: the hero is the home page's
 * `.holding`, and Start is the home page's `.store` - the app's primary
 * button - on a <button> rather than a link. This file adds only what a timer
 * has that the home page does not: the time itself, and the running state.
 *
 * Immutable in the Caddyfile, so a change here is timer-2.css.
 */

/*
 * The time, in Courier Prime Bold - the face the app sets its figures in.
 * Monospaced already, so the digits do not shift as they count; the
 * tabular-nums is for the fallback faces, which are not.
 */
.timer .time {
  margin: 0.5rem 0 2rem;
  font-family: 'Courier Prime', ui-monospace, 'Courier New', monospace;
  font-weight: 700;
  font-size: clamp(4rem, 20vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* .store is drawn for a link; a <button> brings its own font and cursor. */
.timer button.store {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* `hidden` until timer-1.js shows it, and .store's display: flex would
   otherwise outrank the attribute. */
.timer button[hidden] {
  display: none;
}

.timer .hint {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
}

/* The other lengths, as plain links: the page is the timer, not a picker. */
.timer .lengths {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin-top: 1rem;
  font-size: 0.9375rem;
}

.timer .lengths a {
  /* The same 44px tap target as the footer links. */
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

.timer .lengths a[aria-current='page'] {
  color: var(--ink);
  text-decoration: none;
}

/*
 * While it runs there is nothing on the page but the mark, the time and the
 * way to stop it - the same rule as a session in the app. `visibility`, not
 * `display`, so nothing moves when they come back.
 */
.timer[data-state='running'] .hint,
.timer[data-state='running'] .lengths,
.timer[data-state='running'] .stamp {
  visibility: hidden;
}

/* Read out by a screen reader when the time is up; the button already says
   it on screen, so it is not drawn twice. */
.timer .status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}