/* 自動補樣式：js/screens/memo.js（_build/style.py） */
/* ---------- 回診備忘：計數器單位與操作列 ---------- */

/* 「次」單位：緊貼在 .c-counter__value 右側，三者靠左成組，基線對齊數字 */
.c-counter__unit {
  flex: none;
  align-self: flex-end;
  margin-left: calc(-1 * var(--sp-4) + var(--sp-1));
  margin-right: auto;
  padding-bottom: 4px;
  font-size: var(--fs-callout);
  line-height: var(--lh-callout);
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: var(--ls-caption);
  white-space: nowrap;
}

/* −1／+1 操作列：兩顆等寬大按鈕，未設定次數時沒有內容就不佔位 */
.c-counter__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.c-counter__actions:empty {
  display: none;
}

.c-counter__actions > .c-btn {
  min-width: 0;
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  font-size: var(--fs-title3);
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.c-counter__actions > .c-btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.c-counter__actions > .c-btn:disabled {
  opacity: .4;
  transform: none;
}

/* ---------- 回診備忘：調整歷史列 ---------- */

.c-memo__entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  min-width: 0;
  color: var(--text);
  font-size: var(--fs-callout);
  line-height: var(--lh-callout);
}

/* JS 為每列加了下分隔線；最後一列不需要 */
.c-memo__entry:last-child {
  border-bottom: 0 !important;
}

.c-memo__entry > .c-field__hint {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* 復原按鈕：小尺寸文字按鈕，左緣與文字對齊 */
.c-memo__entry > .c-btn {
  justify-self: start;
  min-height: 40px;
  margin-top: var(--sp-1);
  margin-left: calc(-1 * var(--sp-3));
  padding: 0 var(--sp-3);
  font-size: var(--fs-callout);
}

.c-memo__entry > .c-btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* 主行：標題（設定／+1／−1／復原）加前後次數 */
.c-memo__entry-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--sp-1);
  row-gap: 2px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.c-memo__entry-main > strong {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 700;
  color: var(--text);
}

.c-memo__entry-main > span {
  color: var(--text-2);
}

/* 較寬的欄位：說明在左，復原按鈕或提示放右側並垂直置中 */
@container view (min-width: 560px) {
  .c-memo__entry {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--sp-4);
    align-items: start;
  }

  .c-memo__entry > :nth-child(1),
  .c-memo__entry > :nth-child(2) {
    grid-column: 1;
  }

  .c-memo__entry > :nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    max-width: 22ch;
    margin: 0;
    text-align: right;
  }

  .c-memo__entry > .c-btn:nth-child(3) {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-counter__actions > .c-btn,
  .c-memo__entry > .c-btn {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}