/* Setup stays inside the sheets; the main clock and control rows keep their size. */
.routine-sheet {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.routine-options {
  display: flex;
  gap: 5px;
  min-width: 0;
}

.routine-options button,
.alarm-weekdays button {
  min-width: 0;
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid #d9e4df21;
  border-radius: 8px;
  color: #c7d6d2;
  background: #081f292b;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}

.routine-options button[aria-pressed="true"],
.alarm-weekdays button[aria-pressed="true"] {
  border-color: #e6dac0;
  background: #e6dac0;
  color: #24414d;
}

.routine-options button:hover:not([aria-pressed="true"]),
.alarm-weekdays button:hover:not([aria-pressed="true"]) {
  border-color: #d9e4df55;
  background: #d9e4df0c;
}

.routine-options button:focus-visible,
.alarm-weekdays button:focus-visible,
.focus-duration-inputs input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.timer-kind-options {
  gap: 4px;
  padding: 4px;
  border: 1px solid #d9e4df13;
  border-radius: 11px;
  margin-bottom: 15px;
  background: #081f292b;
}

.timer-kind-options button {
  flex: 1;
  min-height: 38px;
  border-color: transparent;
  background: transparent;
}

.timer-kind-panel {
  min-inline-size: 0;
  min-height: 188px;
  margin: 0;
  padding: 0;
  border: 0;
}

#single-timer-fields .duration-inputs {
  padding-top: 20px;
}

.focus-duration-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-top: 8px;
}

.focus-duration-inputs label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #a8c1c0;
  font-size: 10px;
}

.focus-duration-inputs label > span {
  white-space: nowrap;
}

.focus-duration-inputs small {
  margin-left: 3px;
  color: #a8c1c099;
  font-size: 9px;
}

.focus-duration-inputs input {
  width: 100%;
  min-width: 0;
  padding: 10px 0;
  border: 1px solid #ffffff1c;
  border-radius: 9px;
  background: #ffffff06;
  color: var(--ink);
  font-size: 34px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  text-align: center;
  appearance: textfield;
}

.focus-duration-inputs input::-webkit-inner-spin-button {
  appearance: none;
}

.focus-auto-row {
  margin-top: 7px;
  font-size: 11px;
}

.focus-plan {
  margin: 4px 0 0;
  color: #c4d5ce;
  font-size: 10px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.alarm-repeat-section {
  margin-top: 20px;
}

.routine-label {
  display: block;
  margin-bottom: 9px;
  color: #c0d0c9;
  font-size: 11px;
}

.alarm-repeat-options {
  flex-wrap: wrap;
  gap: 6px;
}

.alarm-repeat-options button {
  flex: 1;
  padding-inline: 7px;
  font-size: 10px;
}

.alarm-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-top: 12px;
}

.alarm-weekdays button {
  min-width: 32px;
  padding: 6px 0;
  font-size: 10px;
}

.alarm-form-actions {
  display: grid;
  gap: 4px;
}

#alarm-cancel-edit {
  justify-self: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
}

/* Reserve each action's touch target and let the alarm text wrap naturally. */
#alarm-list .alarm-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 35px 48px 35px;
  column-gap: 6px;
  row-gap: 8px;
}

#alarm-list .alarm-item-info {
  min-width: 0;
}

#alarm-list .alarm-item-time {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

#alarm-list .alarm-item-time small {
  min-width: 0;
  margin-left: 0;
  line-height: 1.4;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}

#alarm-list .alarm-item-info p {
  word-break: normal;
  overflow-wrap: anywhere;
}

#alarm-list .alarm-repeat-label {
  margin-top: 5px;
  color: #d9c6a4c9;
  font-size: 9px;
  line-height: 1.5;
}

#alarm-list [data-alarm-edit] {
  grid-column: 2;
}

#alarm-list .alarm-toggle {
  grid-column: 3;
  width: 48px;
  padding-inline: 4px;
}

#alarm-list [data-alarm-delete] {
  grid-column: 4;
}

#custom-timer-button {
  position: relative;
}

/* The touch target extends beyond the compact preset row without moving it. */
#custom-timer-button::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 32px;
  transform: translateY(-50%);
}

body[data-mode="timer"][data-timer-phase="break"] #activity-dial .activity-remaining {
  stroke: #aad5c5b3;
}

body[data-mode="timer"][data-timer-phase="break"] #activity-dial[data-running="true"] .activity-dot {
  fill: #c9eedc;
}

body[data-mode="timer"][data-timer-phase="break"] #activity-dial .activity-glow {
  fill: #bbead51c;
}

@media (max-width: 440px) {
  .alarm-repeat-options button {
    flex: 1 0 calc((100% - 12px) / 3);
  }

  .alarm-weekdays {
    gap: 3px;
  }

  .focus-duration-inputs {
    gap: 10px;
  }

  .focus-duration-inputs input {
    font-size: 31px;
  }
}

@media (max-width: 380px) {
  #alarm-list .alarm-item-info {
    grid-column: 1 / -1;
  }

  #alarm-list [data-alarm-edit],
  #alarm-list .alarm-toggle,
  #alarm-list [data-alarm-delete] {
    grid-row: 2;
  }
}