/* 自動補樣式：js/screens/review.js（_build/style.py） */
/* ==========================================================================
   review.js 補充樣式：歷次回顧清單列
   DOM 結構：
   li > a.c-card.s-review__row
          > span.s-review__row-title
              > span.s-review__row-range
              > span.c-badge.s-review__row-tag（可選）
          > span.s-review__row-sub
   ========================================================================== */

/* 週區間文字：主要資訊，數字等寬，窄欄時不斷在日期中間 */
.s-review__row-range {
  display: inline-block;
  min-width: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
  letter-spacing: var(--ls-title);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 週標籤（本週進行中／上週）：覆蓋 .c-badge 的欄式 88px 設定，改成行內小膠囊 */
.s-review__row-tag {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  min-height: 22px;
  padding: 1px var(--sp-2);
  margin-left: var(--sp-1);
  border-radius: var(--r-chip);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--fs-caption);
  line-height: 18px;
  font-weight: 600;
  letter-spacing: var(--ls-caption);
  white-space: nowrap;
  vertical-align: middle;
  scroll-snap-align: none;
}

/* 標籤在窄欄容器中允許換行，不撐破卡片 */
@container view (max-width: 360px) {
  .s-review__row-range {
    white-space: normal;
  }
  .s-review__row-tag {
    margin-left: 0;
    margin-top: var(--sp-1);
  }
}

/* 深色模式下 primary-soft 為半透明，補一圈細邊維持辨識度 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .s-review__row-tag {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent);
  }
}

:root[data-theme=dark] .s-review__row-tag {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent);
}

/* 平板以上：區間文字略大，標籤與文字間距加寬 */
@media (min-width: 600px) {
  .s-review__row-range {
    font-size: var(--fs-title3);
    line-height: var(--lh-title3);
  }
  .s-review__row-tag {
    margin-left: var(--sp-2);
  }
}

/* 手機橫式矮螢幕：緊湊 */
@media (orientation: landscape) and (max-height: 500px) {
  .s-review__row-range {
    font-size: var(--fs-callout);
  }
  .s-review__row-tag {
    min-height: 20px;
    line-height: 16px;
  }
}

/* 滑鼠 hover：整列卡片 hover 時，區間文字轉為主色 */
@media (hover: hover) and (pointer: fine) {
  .s-review__row:hover .s-review__row-range {
    color: var(--primary);
  }
}

/* 鍵盤焦點：整列連結聚焦時同樣強調區間文字 */
.s-review__row:focus-visible .s-review__row-range {
  color: var(--primary);
}

/* 減少動態 */
@media (prefers-reduced-motion: reduce) {
  .s-review__row-range,
  .s-review__row-tag {
    transition-duration: 0.01ms !important;
  }
}