/* ==========================================
   section-activity.css
   エージェントB: ②最近の活動
   ========================================== */

/* セクション全体 */
.top-activity {
  padding: 0;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  display: block;
  overflow: visible;
  position: relative;
}

/* タイトル */
.top-activity-title,
.top-page .top-content-right .top-activity-title,
.top-page .top-activity .top-activity-title {
  font-size: 1.4em;
  color: var(--color-main);
  border-bottom: 2px solid var(--color-sky);
  padding: 0.5em 0.8em 0.3em;
  margin-bottom: 1rem;
  text-align: left !important;
  width: 100%;
}

/* 活動リスト — 正: activity高、下端同期のためmargin除去(左gap 0.8emと同期) */
/* plan 1789870845506: 最新10件・可視4件・リスト内スクロール（カード寸法・gap・外枠不変）
   実測 (Playwright・fonts.ready後): 1280=289.36px/16.08em・768=282.92px/15.72em・390=252.45px/15.78em（自然4件高）。
   単一値16.1emは全幅で4件完全収納＋5件目非表示（1280 +0.4px / 768 +6.9px / 390 +5.1pxのgap余白のみ・カード覗きなし）。
   flex-shrink:0はスクロール成立に必須（既定1ではmax-height時にカードが圧縮され文字が潰れる。寸法変更ではなく保全）。 */
.top-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  margin-bottom: 0;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: 16.1em;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 86, 142, 0.45) transparent;
}
.top-activity-list > * {
  flex-shrink: 0;
}
.top-activity-list::-webkit-scrollbar {
  width: 7px;
}
.top-activity-list::-webkit-scrollbar-track {
  background: transparent;
}
.top-activity-list::-webkit-scrollbar-thumb {
  background: rgba(95, 86, 142, 0.35);
  border-radius: 4px;
}
.top-activity-list:focus-visible {
  outline: 2px solid var(--color-fuji-deep, #5F568E);
  outline-offset: 2px;
}
/* 下端フェード: スクロール可能であることの明示（カード幅不変・クリック阻害なし・JSなし）
   .top-activity の padding (1.5em 1.25em 1.75em) 内側のリスト下端に重ねる。
   left:0/bottom:0 ではpadding領域に落ちてカードに掛からず不可視になるため、左右1.25em・下1.75emでインセット。
   481-768px帯はリスト左右margin 18px分さらに内側（下のメディアクエリで補正）。 */
.top-activity::after {
  content: "";
  position: absolute;
  left: 1.25em;
  right: 1.25em;
  bottom: 1.75em;
  height: 28px;
  background: linear-gradient(to bottom, rgba(243, 250, 253, 0), var(--color-bg-light, #F3FAFD));
  pointer-events: none;
  border-radius: 0 0 8px 8px;
}
@media (min-width: 481px) and (max-width: 768px) {
  .top-activity::after {
    left: calc(1.25em + 18px);
    right: calc(1.25em + 18px);
  }
}
/* 上端フェード: 下端::afterの対称。下にまだある時だけ下端が透け、上にまだある時だけ上端が透ける。
   先頭では上端なし・最下端では下端なし・中間では両端あり、の3状態を視覚化する（CSSのみ・JSなし）。
   リスト先頭の sticky 要素として配置するため、タイトル高・padding・481-768px帯marginの影響を受けず
   自動でリスト框に一致する（コンテナ::after方式のようなem補正が不要）。
   flexアイテム化によるレイアウト加算は margin-bottom で相殺（高さ28px＋gap 0.8em分）。
   対応環境ではスクロール連動で先頭のみ透明、非対応環境では常時非表示にフォールバック。 */
.top-activity-list::before {
  content: "";
  position: sticky;
  top: 0;
  height: 28px;
  margin-bottom: calc(-28px - 0.8em);
  flex-shrink: 0;
  /* 必須: .top-activity-item が position:relative のため、後続カードが上に描画して
     ::before を隠してしまう。z-index でカードより前面に出す（クリックは素通り）。 */
  z-index: 1;
  background: linear-gradient(to bottom, var(--color-bg-light, #F3FAFD), rgba(243, 250, 253, 0));
  pointer-events: none;
  border-radius: 8px 8px 0 0;
  opacity: 0;
}
@supports (animation-timeline: scroll(nearest)) {
  .top-activity-list::before {
    animation: top-activity-fade-top-hint linear both;
    animation-timeline: scroll(nearest);
  }
}
@keyframes top-activity-fade-top-hint {
  0% { opacity: 0; }
  15%, 100% { opacity: 1; }
}
/* 一番下到達でフェードを消す（CSSのみ・JSなし）。
   10件目まで到達したのに最下カードが透け続ける違和感の解消。下にまだある間だけ暗示する。
   ::afterはスクロール容器の子ではないため匿名 scroll(nearest) ではページスクロールに束縛されてしまう。
   名前付きタイムライン＋timeline-scopeでリストのスクロールに束縛する。非対応環境は常時表示にフォールバック。 */
.top-activity {
  timeline-scope: --top-activity-scroll;
}
.top-activity-list {
  scroll-timeline-name: --top-activity-scroll;
  scroll-timeline-axis: block;
}
@supports (animation-timeline: --top-activity-scroll) {
  .top-activity::after {
    animation: top-activity-fade-hint linear both;
    animation-timeline: --top-activity-scroll;
  }
}
@keyframes top-activity-fade-hint {
  0%, 85% { opacity: 1; }
  100% { opacity: 0; }
}
/* plan 1789894077173: JSスクロール連動に置換（全幅共通・iPad/WebKit対応）。
   実測 (Playwright 834): Chromiumは3状態正常。WebKit 26.5は supports(true,true,true) でも
   下端名前付きtimeline不成立で ::after opacity常時0（上端scroll(nearest)は成立）。
   実機iPad症状（下常時表示・上常時非表示）は旧WebKitの両不適用フォールバックと一致。同根のためJS化で両対応。
   実機iPad症状（下常時表示・上常時非表示）は旧WebKitの両不適用フォールバックと一致。同根のためJS化で両対応。
   CSS Scroll-drivenは animation:none で無効化（削除せず巻戻し可能に）。timeline-scope/scroll-timeline-* は
   animationなしでは描画に影響しないため残置。寸法・色・勾配・高さ28px・pointer-events・z-index・radius不変。
   既定（no-js/初期）= is-top相当（上0・下1）。JSが .is-top/.is-mid/.is-bottom/.is-noscroll を付与する。 */
.top-activity-list::before,
.top-activity::after {
  animation: none !important;
}
/* 先頭：上消・下表（既定と同値・明示化） */
.top-activity.is-top .top-activity-list::before {
  opacity: 0;
}
.top-activity.is-top::after {
  opacity: 1;
}
/* 中間：上下表 */
.top-activity.is-mid .top-activity-list::before {
  opacity: 1;
}
.top-activity.is-mid::after {
  opacity: 1;
}
/* 最下端：上表・下消 */
.top-activity.is-bottom .top-activity-list::before {
  opacity: 1;
}
.top-activity.is-bottom::after {
  opacity: 0;
}
/* 非スクロール可能時（件数≦4）：両方消 */
.top-activity.is-noscroll .top-activity-list::before,
.top-activity.is-noscroll::after {
  opacity: 0;
}
@media print {
  .top-activity-list {
    overflow: visible;
    max-height: none;
  }
  .top-activity::after,
  .top-activity-list::before {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .top-activity-list::before,
  .top-activity::after {
    transition: none;
  }
}

/* 各活動アイテム */
.top-activity-item {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.8em 1em;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  /* plan 1788422502785: 通常時のごく薄い影を18枚に統一（hover 0 4px 12pxより明確に弱く） */
  box-shadow: 0 1px 3px rgba(31,32,65,0.06);
  min-width: 0;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* plan 1788441452706: 白カードhover統一トークンA（影＋浮きのみ・枠維持） */
@media (hover: hover) {
  .top-activity-item:hover {
    border-color: var(--color-border, #DCE6EE);
    box-shadow: 0 4px 16px rgba(31, 32, 65, 0.12);
    transform: translateY(-2px);
  }
  .top-activity-item:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(31, 32, 65, 0.10);
  }
}

.top-activity-item:focus-visible {
  outline: 2px solid var(--color-fuji-deep, #5F568E);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .top-activity-item {
    transition: none;
  }
  .top-activity-item:hover,
  .top-activity-item:active {
    transform: none;
    box-shadow: 0 1px 3px rgba(31, 32, 65, 0.06);
  }
}

@media print {
  .top-activity-item:hover,
  .top-activity-item:active {
    transform: none;
    box-shadow: none;
  }
}

/* ソースアイコン */
.top-activity-source {
  font-size: 0.85em;
  font-weight: bold;
  color: var(--color-fuji-deep);
  white-space: nowrap;
}

/* 日付 */
.top-activity-date {
  font-size: 0.8em;
  color: #888;
  white-space: nowrap;
  min-width: 2.8em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* テキスト */
.top-activity-text {
  font-size: 0.95em;
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* もっと見るリンク */
.top-activity-more {
  display: inline-block;
  padding: 0.5em 1.5em;
  background-color: var(--color-fuji-mid);
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9em;
  transition: background-color 0.2s ease;
}

.top-activity-more:hover {
  background-color: var(--color-main);
}

/* Font Awesome brand icon weight fix (YouTube) */
.top-activity-source .fab {
  font-weight: 400;
}

/* ソース別色分け — 外部リンク識別 (原色回避・サイトのくすみパステルに調和)
   blog はデフォルト var(--color-fuji-deep) 維持、youtube/note/speakerdeck のみ上書き。
   将来 :root 変数 --color-activity-youtube / --color-activity-note / --color-activity-speakerdeck へ昇格可能。 */
.top-activity-item[data-source="youtube"] .top-activity-source,
.top-activity-item[data-source="youtube"] .top-activity-source i {
  color: #B14E4B; /* muted brick red: hsl(2 38% 49%) */
}
.top-activity-item[data-source="note"] .top-activity-source,
.top-activity-item[data-source="note"] .top-activity-source i {
  color: #5F6570; /* muted slate gray: hsl(218 7% 41%) */
}
.top-activity-item[data-source="speakerdeck"] .top-activity-source,
.top-activity-item[data-source="speakerdeck"] .top-activity-source i {
  color: #2E7D77; /* muted teal for 資料 */
}

/* affordance (plan 1788165101395): 行末の矢印は右端中央を自然末端に */
.top-activity-item .top-card-aff--iconOnly{
  margin-left:auto;
  flex-shrink:0;
}

/* plan 1788273929470 課題2 PC: 活動カードをカード同型のシェブロン帯に */
.top-activity-item{
  position: relative;
  overflow: hidden;
  padding-right: 33px;
}
.top-activity-item .top-card-aff--iconOnly{
  position: absolute;
  top: 3px; right: 3px; bottom: 3px;
  width: 30px; min-width: 30px; max-width: 30px;
  /* plan 1788423003233: 完全tint一致・濃くしない（var(--color-bg-light,#F3FAFD)と同値 / 8pxフェード維持 / 3px inset白縁） */
  background: linear-gradient(to right, rgba(243,250,253,0) 0, var(--color-bg-light, #F3FAFD) 8px);
  border-left: none;
  border-radius: 0 5px 5px 0;
  margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.top-activity-item .top-activity-text{
  padding-right: 0.6em;
}

/* レスポンシブ */