/* Stopwatch compact first-view layout. Loaded after the shared stylesheet. */
@media (max-width: 560px) {
  .stopwatch-page.main-container { padding-top: 24px; }
  .stopwatch-page .tool-intro > .eyebrow,
  .stopwatch-page .tool-intro > .small { display: none; }
  .stopwatch-page > .tool-card-wide:first-of-type { display: flex; flex-direction: column; }
  .stopwatch-page > .tool-card-wide:first-of-type > .timer-grid { order: 1; }
  .stopwatch-page > .tool-card-wide:first-of-type > .actions { order: 2; margin-top: 18px; }
  .stopwatch-page > .tool-card-wide:first-of-type > .auto-save-note { order: 3; }
  .stopwatch-page > .tool-card-wide:first-of-type > .backup-panel { order: 4; }
}

.stopwatch-page #timer-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.stopwatch-page .timer-card { position: relative; padding: 10px; }
.stopwatch-page .timer-card:has(.timer-primary-action[aria-pressed="true"]) { background: #effaf3; box-shadow: inset 4px 0 0 #16a05d; }
.stopwatch-page .timer-card:has(.timer-primary-action[aria-pressed="true"]) .timer-time { color: #08743f; }
.stopwatch-page .timer-card:has(.timer-primary-action[aria-pressed="true"]) .timer-primary-action { background: #bf3f45; color: #fff; box-shadow: 0 4px 10px rgba(191, 63, 69, .2); }
.stopwatch-page .timer-card:has(.timer-primary-action[aria-pressed="true"]) .timer-primary-action:hover { background: #a93038; }
.stopwatch-page .timer-card .timer-time { font-size: 1.65rem; margin: 4px 0; }
.stopwatch-page .timer-card .actions { margin-top: 4px; }
.stopwatch-page .timer-card .timer-actions { gap: 5px; }
.stopwatch-page .timer-card .timer-actions .button { padding: 5px 6px; font-size: .84rem; }

@media (min-width: 768px) {
  .stopwatch-page #timer-grid { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .stopwatch-page .timer-card { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(84px, auto) minmax(280px, 1.5fr); gap: 8px; align-items: center; min-height: 56px; padding: 6px 8px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
  .stopwatch-page .timer-card:last-child { border-bottom: 0; }
  .stopwatch-page .timer-card > label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .stopwatch-page .timer-card > input { min-width: 0; margin: 0; padding: 7px 8px; }
  .stopwatch-page .timer-card > .timer-time { margin: 0; font-size: 1.45rem; text-align: center; white-space: nowrap; }
  .stopwatch-page .timer-card > .timer-actions { min-width: 0; margin: 0; }
  .stopwatch-page .timer-card > .timer-actions .button { white-space: nowrap; }
}

@media (max-width: 767px) {
  .stopwatch-page #timer-grid,
  .stopwatch-page .timer-card { min-width: 0; }
  .stopwatch-page .timer-card { display: grid; grid-template-columns: minmax(96px, 1fr) minmax(68px, max-content) minmax(82px, 30%); gap: 4px; align-items: center; min-height: 52px; padding: 4px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
  .stopwatch-page .timer-card:last-child { border-bottom: 0; }
  .stopwatch-page .timer-card > label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .stopwatch-page .timer-card > input[id^="timer-name-"] { grid-column: 1; grid-row: 1; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; justify-self: stretch; margin: 0; padding: 7px 8px 7px 16px; overflow: hidden; text-overflow: ellipsis; }
  .stopwatch-page .timer-card > .timer-time { grid-column: 2; grid-row: 1; min-width: 68px; max-width: 100%; margin: 0; font-size: .88rem; letter-spacing: .01em; text-align: center; white-space: nowrap; justify-self: center; overflow: hidden; }
  .stopwatch-page .timer-card > .timer-time { gap: 0; }
  .stopwatch-page .timer-card > .timer-actions { grid-column: 3; grid-row: 1; display: grid; grid-template-columns: minmax(34px, 1fr) 22px 22px; min-width: 0; margin: 0; gap: 2px; }
  .stopwatch-page .timer-card > .timer-actions .button { min-width: 0; min-height: 44px; padding: 4px 1px; font-size: .68rem; line-height: 1.15; white-space: nowrap; overflow: hidden; }
  .stopwatch-page .timer-card > .timer-actions .timer-memo-toggle { width: 22px; padding-inline: 0; font-size: .9rem; }
  .stopwatch-page .timer-card.is-running,
  .stopwatch-page .timer-card:has(.timer-primary-action[aria-pressed="true"]) { background: #effaf3; box-shadow: inset 4px 0 0 #16a05d; }
  .stopwatch-page .timer-card.is-running .timer-time,
  .stopwatch-page .timer-card:has(.timer-primary-action[aria-pressed="true"]) .timer-time { color: #08743f; }
  .stopwatch-page .timer-card.is-running .timer-primary-action,
  .stopwatch-page .timer-card:has(.timer-primary-action[aria-pressed="true"]) .timer-primary-action { background: #bf3f45; color: #fff; box-shadow: 0 4px 10px rgba(191, 63, 69, .2); }
  .stopwatch-page .timer-card.is-running .timer-primary-action:hover,
  .stopwatch-page .timer-card:has(.timer-primary-action[aria-pressed="true"]) .timer-primary-action:hover { background: #a93038; }
  .stopwatch-page .timer-card.is-running > input[id^="timer-name-"] { color: #08743f; border-color: #67b888; background: #f7fffa; }
  .stopwatch-page .timer-card.is-running > input[id^="timer-name-"]::placeholder { color: #4c8a68; opacity: 1; }
}

@media (max-width: 359px) {
  .stopwatch-page .timer-card { grid-template-columns: minmax(88px, 1fr) minmax(64px, max-content) minmax(82px, 32%); }
  .stopwatch-page .timer-card > .timer-time { min-width: 66px; font-size: .8rem; gap: 0; }
  .stopwatch-page .timer-card > .timer-actions { grid-template-columns: minmax(34px, 1fr) 22px 22px; gap: 2px; }
  .stopwatch-page .timer-card > .timer-actions .button { padding-inline: 1px; font-size: .66rem; }
}

@media (max-width: 299px) {
  .stopwatch-page .timer-card { grid-template-columns: minmax(84px, 1fr) minmax(62px, max-content) minmax(82px, 32%); }
  .stopwatch-page .timer-card > .timer-time { min-width: 62px; }
}