.timer-panel {
  display: grid;
  gap: 1rem;
}

.timer-active-card,
.timer-done-card {
  display: grid;
  gap: .85rem;
}

.timer-display {
  font-size: clamp(2.8rem, 14vw, 5.2rem);
  line-height: 1;
  font-weight: 900;
  text-align: center;
  margin: .65rem 0 .35rem;
  color: var(--brand-dark, #26776f);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}

.timer-progress-wrap {
  display: grid;
  gap: .55rem;
  padding: .85rem;
  border-radius: 1.25rem;
  background: rgba(54, 171, 156, .08);
  border: 1px solid rgba(54, 171, 156, .18);
}

.timer-progress-track {
  width: 100%;
  min-height: .85rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  border: 1px solid rgba(15, 23, 42, .08);
}

.timer-progress-fill {
  display: block;
  min-height: .85rem;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(54, 171, 156, .55), rgba(54, 171, 156, .95));
  transition: width .32s ease;
}

.timer-progress-wrap.reduced-motion .timer-progress-fill,
body.reduce-motion .timer-progress-fill,
body.low-stimulation .timer-progress-fill {
  transition: none;
}

.timer-progress-text,
.timer-active-status {
  margin: 0;
  text-align: center;
}

.timer-action-panel,
.timer-end-choice-grid,
.timer-preset-grid {
  display: grid;
  gap: .65rem;
}

.timer-action-panel {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.timer-end-choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.timer-end-choice {
  min-height: 4.25rem;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .25rem;
  text-align: center;
}

.timer-end-choice span {
  font-size: .82rem;
  line-height: 1.25;
  opacity: .86;
}

.timer-preset-choices summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--brand-dark, #26776f);
  padding: .25rem 0;
}

.timer-preset-grid {
  margin-top: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.timer-preset-card.active {
  outline: 3px solid rgba(54, 171, 156, .32);
  border-color: rgba(54, 171, 156, .55);
}

@media (max-width: 540px) {
  .timer-action-panel,
  .timer-end-choice-grid,
  .timer-preset-grid {
    grid-template-columns: 1fr;
  }

  .timer-display {
    font-size: clamp(3.1rem, 20vw, 4.8rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timer-progress-fill {
    transition: none;
  }
}

/* RESET-KIT-21E: timer done screen uses the same clear card output pattern as reset cards. */
.timer-panel-done .trust-note,
.timer-panel-done .timer-preset-choices,
.timer-panel-done .timer-favorite-row {
  display: none;
}

.timer-done-output-actions .action {
  min-height: 3rem;
  display: grid;
  gap: .18rem;
}

.timer-done-output-actions .action span {
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.2;
}

.timer-next-options {
  display: grid;
  gap: .62rem;
  padding: .78rem;
  border: 1px solid rgba(54,171,156,.18);
  border-radius: 1rem;
  background: rgba(54,171,156,.06);
}

.timer-next-options h4 {
  margin: 0;
  color: var(--brand-dark, #26776f);
  font-size: .96rem;
}

.timer-closing-pattern {
  margin-top: .1rem;
}

.timer-save-outcome-status:empty {
  display: none;
}

/* RESET-KIT-21G: clean timer sheet hierarchy without changing global bottom padding. */
.timer-sheet-intro {
  display: grid;
  gap: .55rem;
}

.timer-sheet-intro .kicker {
  justify-self: start;
  margin-bottom: 0;
}

.timer-sheet-intro h2 {
  margin: 0;
  font-size: clamp(1.65rem, 7vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.timer-panel [data-route-title]:focus {
  outline: none;
  box-shadow: none;
}

.timer-sheet-intro .lede {
  margin: 0;
  max-width: 34rem;
}

.timer-selected-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .16rem .5rem;
  align-items: center;
  width: 100%;
  padding: .72rem .82rem;
  border: 1px solid rgba(54, 171, 156, .22);
  border-radius: 1rem;
  background: rgba(239, 250, 248, .82);
  color: var(--text);
}

.timer-selected-chip span {
  color: var(--brand-dark, #26776f);
  font-weight: 850;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.timer-selected-chip strong,
.timer-selected-chip em {
  min-width: 0;
}

.timer-selected-chip em {
  grid-column: 2;
  color: var(--text-muted);
  font-style: normal;
  font-size: .86rem;
}

.timer-card-heading {
  display: grid;
  gap: .38rem;
}

.timer-card-heading h3,
.timer-card-heading p {
  margin: 0;
}

.timer-card-topline {
  margin-bottom: -.12rem;
}

.timer-active-card .timer-progress-wrap {
  padding: clamp(.75rem, 3.5vw, 1rem);
  background: linear-gradient(180deg, rgba(239, 250, 248, .92), rgba(239, 250, 248, .64));
}

.timer-active-card .timer-display {
  margin-top: .2rem;
}

.timer-active-card .timer-active-status {
  font-weight: 760;
  color: var(--text-muted);
}

.timer-action-panel {
  grid-template-columns: 1fr;
  gap: .5rem;
}

.timer-action-panel .action {
  width: 100%;
}

@media (min-width: 620px) {
  .timer-action-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .timer-action-panel .action:first-child:nth-last-child(2) {
    grid-column: span 2;
  }
}

.timer-secondary-tools {
  display: grid;
  gap: .62rem;
  padding: .82rem;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, .72);
}

.timer-preset-choices {
  margin: 0;
}

.timer-preset-choices summary {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.65rem;
  padding: .55rem .75rem;
  border: 1px solid rgba(54, 171, 156, .18);
  border-radius: .9rem;
  background: rgba(239, 250, 248, .76);
}

.timer-preset-helper {
  margin: .58rem 0 0;
}

.timer-favorite-row {
  display: grid;
  gap: .28rem;
}

.timer-favorite-row .action {
  width: 100%;
}

.timer-favorite-status {
  margin: 0;
}

.timer-favorite-status:empty {
  display: none;
}

.timer-support-links {
  display: grid;
  gap: .62rem;
  padding: .82rem;
  border: 1px solid rgba(245, 138, 72, .22);
  border-radius: 1.1rem;
  background: linear-gradient(180deg, rgba(255, 244, 236, .68), rgba(255, 255, 255, .72));
}

.timer-support-links h3 {
  margin: 0;
  font-size: 1rem;
}

.timer-support-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}

.timer-support-grid .action {
  width: 100%;
}

@media (min-width: 620px) {
  .timer-support-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.timer-panel-done .timer-sheet-intro {
  gap: .42rem;
}

.timer-panel-done .timer-done-card {
  gap: .72rem;
}

.timer-panel-done .timer-next-options {
  margin-top: .1rem;
}

@media (max-width: 430px) {
  .timer-selected-chip {
    grid-template-columns: 1fr;
  }

  .timer-selected-chip em {
    grid-column: 1;
  }

  .timer-secondary-tools,
  .timer-support-links {
    padding: .72rem;
    border-radius: 1rem;
  }
}

/* RESET-KIT-23: contextual timer return. */
.timer-context-return {
  border-color: rgba(54, 171, 156, 0.32);
  background: rgba(239, 250, 248, 0.9);
}


/* RESET-KIT-27M: timer screens opened from a support card need a quiet return link before the timer is used. */
.timer-context-back-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  width: auto;
  min-height: 2.25rem;
  padding: .15rem .05rem;
  border: 0;
  background: transparent;
  color: var(--color-accent-dark, #3f827b);
  font: inherit;
  font-weight: 850;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}

.timer-context-back-link:focus-visible {
  outline: 3px solid var(--focus-ring, rgba(67, 136, 136, .24));
  outline-offset: .2rem;
  border-radius: .45rem;
}