/* The script timer on /tools/script-timer.

   The tool sits on the page's surface colour in both themes. The delivery
   marks card is always dark, like the app's own Delivery marks card, so the
   lift and land colours are the app's exact cue colours (#FFA24C, #6FA8FF);
   both pass WCAG AA on it. Tone is never shown by colour alone: lifted words
   also sit higher, landed words lower, and each carries screen-reader text. */

.timer {
  --timer-card: #16151c;
  --timer-card-text: #f4f1e7;
  --timer-card-muted: #c9c6cf;
  --timer-lift: #ffa24c;
  --timer-land: #6fa8ff;
  --timer-breath: #a8a5ad;
  --timer-field: var(--paper);
  margin-block: 44px 20px;
  padding: clamp(20px, 3.4vw, 40px);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(10 8 19 / 6%), 0 18px 48px -24px rgb(10 8 19 / 22%);
}

.timer-head h2 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.035em; }
.timer-fallback {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}

.timer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: 26px;
  align-items: start;
}

/* ---------------------------------------------------------------- inputs */

.timer-controls { display: grid; gap: 22px; min-width: 0; }
.timer-field { display: grid; gap: 8px; min-width: 0; }
.timer-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.timer-field label, .timer-fieldset legend, .timer-wpm label { font-size: 14px; font-weight: 600; }

.timer textarea,
.timer select,
.timer-wpm input {
  width: 100%;
  min-width: 0;
  color: var(--ink);
  background: var(--timer-field);
  border: 1px solid var(--line);
  border-radius: 14px;
  font: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.timer textarea {
  display: block;
  min-height: 210px;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.6;
  resize: vertical;
}
.timer select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
  padding: 10px 44px 10px 14px;
  font-size: 16px;
  cursor: pointer;
  /* A chevron from two gradients, so no image request and no inline SVG. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.timer textarea:focus-visible,
.timer select:focus-visible,
.timer-wpm input:focus-visible {
  outline: none;
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 28%, transparent);
}

.timer-note { color: var(--muted); font-size: 13px; line-height: 1.6; }

.timer-clear {
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid var(--line);
  font-size: 13px;
}
@media (hover: hover) {
  .timer-clear:hover { background: var(--paper); }
}

.timer-fieldset { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.timer-fieldset legend { padding: 0; margin-bottom: 12px; }

.timer-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.timer-style {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 13px 14px 13px 42px;
  border-radius: 16px;
  background: var(--timer-field);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .2s, box-shadow .25s cubic-bezier(.22, 1, .36, 1);
}
.timer-style input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 15px;
  left: 14px;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
  background: var(--timer-field);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.timer-style input::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-text);
  transform: scale(0);
  transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}
.timer-style input:checked { border-color: var(--accent-text); }
.timer-style input:checked::before { transform: scale(1); }
.timer-style input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.timer-style-name { font-weight: 600; font-size: 15px; }
.timer-style-name span { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 4px; }
.timer-style-blurb { color: var(--muted); font-size: 13px; line-height: 1.45; }
.timer-style:has(input:checked) {
  border-color: var(--accent-text);
  box-shadow: 0 10px 26px -18px rgb(10 8 19 / 45%);
}

.timer-pace-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.timer-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.timer-presets button {
  min-width: 56px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--timer-field);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  transition: background .2s, color .2s, transform .25s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) {
  .timer-presets button:hover { transform: translateY(-2px); }
}
.timer-presets button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.timer-wpm { display: grid; gap: 6px; }
.timer-wpm input { width: 112px; min-height: 44px; padding: 8px 12px; font-size: 16px; font-variant-numeric: tabular-nums; }
.timer-range { width: 100%; accent-color: var(--accent-text); min-height: 28px; }

/* ---------------------------------------------------------------- results */

.timer-results {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgb(10 8 19 / 5%), 0 12px 30px -20px rgb(10 8 19 / 28%);
}
.timer-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; margin: 0; }
.timer-figure { min-width: 0; }
.timer-figure dt { color: var(--muted); font-size: 13px; line-height: 1.45; }
.timer-figure dd { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.timer-figure dd strong {
  display: block;
  color: var(--ink);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.timer-figure:last-child dd { color: var(--ink); line-height: 1.5; }
.timer-figure.is-main { grid-column: 1 / -1; order: -1; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.timer-figure.is-main dd strong { font-size: clamp(48px, 5.4vw, 72px); letter-spacing: -.05em; }

.timer-app-label { color: var(--muted); font-size: 13px; line-height: 1.6; }
/* The app sets this label in capitals; only the figures are, never the name. */
.timer-app-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.timer-target-result { font-size: 15px; line-height: 1.6; }
.timer-target-result:empty { display: none; }

.timer-fit { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; table-layout: fixed; }
.timer-fit caption { text-align: left; color: var(--muted); font-size: 13px; padding-bottom: 8px; }
.timer-fit th, .timer-fit td { padding: 8px 4px; text-align: center; border-top: 1px solid var(--line); }
.timer-fit th { font-size: 12px; font-weight: 500; color: var(--muted); }
.timer-fit td { font-size: 18px; }

/* ---------------------------------------------------------------- marks card */

.timer-marks-card {
  margin-top: clamp(20px, 3vw, 32px);
  padding: clamp(20px, 3vw, 32px);
  border-radius: 22px;
  background: var(--timer-card);
  color: var(--timer-card-text);
}
.timer-marks-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; }
.timer-marks-head h3 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.timer-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--timer-card-muted); }
.timer-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.timer-legend-item.is-lift::before,
.timer-legend-item.is-land::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.timer-legend-item.is-lift::before { background: var(--timer-lift); }
.timer-legend-item.is-land::before { background: var(--timer-land); }

.timer-marks { margin-top: 18px; max-height: 520px; overflow-y: auto; overscroll-behavior: contain; }
/* Moss on this dark card is too faint for a focus ring; the brand green isn't. */
.timer-marks:focus-visible { outline: 2px solid #76ff03; outline-offset: 6px; border-radius: 6px; }
.timer-marks-line { font-size: 18px; line-height: 2.55; font-weight: 600; overflow-wrap: anywhere; }
.timer-marks-line + .timer-marks-line { margin-top: 2px; }
.timer-marks-line.is-after-gap { margin-top: 16px; }
.timer-marks-empty { color: var(--timer-card-muted); font-size: 15px; }

.timer-token { white-space: nowrap; }
.timer-word { display: inline-block; position: relative; white-space: normal; }
.timer-word.is-lift { color: var(--timer-lift); transform: translateY(-.34em); }
.timer-word.is-land { color: var(--timer-land); transform: translateY(.34em); }
.timer-word.is-lean { font-weight: 850; }

/* The app's breath mark: a cup open at the top. */
.timer-breath {
  display: inline-block;
  width: .56em;
  height: .5em;
  margin-inline: .05em;
  border: .09em solid var(--timer-breath);
  border-top: 0;
  border-radius: 0 0 .08em .08em;
  vertical-align: -.02em;
}
.timer-breath.is-long { width: .7em; height: .62em; }
.timer-token .timer-breath { margin-left: .32em; }
.timer-legend .timer-breath { font-size: 16px; }

.timer-marks-note { margin-top: 18px; color: var(--timer-card-muted); font-size: 13px; line-height: 1.6; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .timer-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .timer { margin-inline: -4px; border-radius: 22px; }
  .timer-styles { grid-template-columns: minmax(0, 1fr); }
  .timer-marks-line { font-size: 17px; }
}

@media (max-width: 380px) {
  .timer-figures { grid-template-columns: minmax(0, 1fr); }
  .timer-presets button { min-width: 48px; padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .timer-presets button:hover { transform: none; }
}