/* タイムラインブロック（type=timeline。描画は assets/js/timeline.js、枠は lib/render_timeline.php）。
   色はテーマの CSS 変数（--f-text / --f-muted / --f-accent / --f-card / --f-surface / --f-border）に従う。
   強調色（タブ・チップ・スイッチなど）は --tl-accent。色テーマ（lib/theme.php の colorTheme）があれば下バーと同じ --f-nav-accent、無ければ --f-accent。リンク・@メンション・#タグ・訳の切り替えは --tl-link = X の青 #1d9bf0 で固定。
   カスタム CSS からは .folita-timeline と .tl-*（.tl-entry .tl-post .tl-text .tl-quote .tl-media .tl-metrics .tl-tr …）で変えられる */

.folita-timeline, .tl-menu, .tl-modal-overlay { --tl-accent: var(--f-nav-accent, var(--f-accent)); --tl-link: #1d9bf0; }   /* リンク・@メンション・#タグ・訳の切り替え・スピナーは X の青で統一 (テーマの色に寄せない) */
.folita-timeline { --tl-radius: min(var(--f-btn-radius), 20px); width: 100%; text-align: left; color: var(--f-text); }
.tl-ic { width: 1em; height: 1em; display: block; flex: none; }
.tl-icon { display: inline-flex; align-items: center; vertical-align: -0.125em; }
.tl-spin { animation: tl-spin 1s linear infinite; }
@keyframes tl-spin { to { transform: rotate(360deg); } }

/* 見出し（タイトル・今すぐ同期・表示設定） */
.tl-headbar { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; }
.tl-title { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.tl-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--f-border); border-radius: 999px; background: var(--f-card); color: var(--f-muted); font-size: 16px; cursor: pointer; transition: color .15s, background .15s; }
.tl-iconbtn[hidden] { display: none; }
.tl-updated { flex: none; font-size: 12px; color: var(--f-muted); white-space: nowrap; }   /* 最終更新（最後に同期した時刻） */
.tl-iconbtn:hover { color: var(--f-text); }
.tl-iconbtn:disabled { opacity: .5; cursor: default; }
.tl-sync.is-syncing .tl-ic { animation: tl-spin 1s linear infinite; }
.tl-note { margin: -4px 2px 10px; font-size: 12px; color: var(--f-muted); }

/* 取得元のタブ・アカウントのチップ */
.tl-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tl-tabs:empty, .tl-accounts:empty { display: none; }
.tl-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--f-border); border-radius: 999px; background: var(--f-card); color: var(--f-muted); font: inherit; font-size: 13px; cursor: pointer; }
.tl-tab.is-active { background: color-mix(in srgb, var(--tl-accent) 16%, var(--f-card)); color: var(--tl-accent); border-color: transparent; font-weight: 700; }
.tl-tab-icon svg { width: 15px; height: 15px; }
.tl-accounts { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.tl-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--f-border); border-radius: 999px; background: var(--f-card); color: var(--f-muted); font: inherit; font-size: 12px; cursor: pointer; }
.tl-chip.is-active { background: color-mix(in srgb, var(--tl-accent) 16%, var(--f-card)); color: var(--tl-accent); border-color: transparent; font-weight: 700; }
.tl-chip.is-account { padding: 3px 12px 3px 3px; }
.tl-chip-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
.tl-chip-handle { font-weight: 400; opacity: .75; }
/* チップの中の認証済み・鍵の印: 名前のすぐ右、「/ @id」の前。文字が 12px なので投稿の見出しより少し小さい */
.tl-chip-label { display: inline-flex; align-items: center; gap: 3px; }
.tl-chip .tl-marks { margin-left: 0; gap: 2px; }
.tl-chip .tl-verified { font-size: 13px; }
.tl-chip .tl-lock { font-size: 12px; }

.tl-placeholder { display: flex; align-items: center; gap: 6px; padding: 10px 2px; margin: 0; font-size: 13px; color: var(--f-muted); }
.tl-more { display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; margin: 4px 0 0; padding: 10px; border: 1px dashed var(--f-border); border-radius: var(--tl-radius); background: none; color: var(--f-muted); font: inherit; font-size: 13px; cursor: pointer; }
.tl-more:hover { color: var(--f-text); }
/* X 風のローダー（timeline.js の loader。ICON.spinner を X の青で 26px。翻訳中のバーの .tl-tr-spin と同じ絵）。
   無限表示の見張り役 (.tl-sentinel) もこれで、一覧の下に置いて見えたら続きを取る。X と同じく一覧の末尾で回り続ける */
.tl-loader { display: flex; justify-content: center; align-items: center; margin: 0; padding: 24px 0 32px; color: var(--tl-link); }
.tl-loader .tl-ic { width: 26px; height: 26px; animation: tl-spin .75s linear infinite; }   /* 0.75 秒で 1 回転（0deg → 360deg。@keyframes tl-spin） */
.tl-list > .tl-loader:only-child { padding: 40px 0; }   /* タブ・チップを切り替えた直後の空の一覧 */
.tl-noscript { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.tl-noscript li { padding: 8px 0; border-top: 1px solid var(--f-border); }

/* 投稿のカード */
.tl-entry { margin-bottom: 12px; padding: 14px; border: 1px solid var(--f-border); border-radius: var(--tl-radius); background: var(--f-card); }
.tl-post { display: flex; gap: 12px; min-width: 0; }
/* 「選択ポストへのリンク」で開いた投稿（?post=）: 真ん中にスクロールして、ふちを光らせてから消す */
.tl-post.is-focused, .tl-quote.is-focused { animation: tl-focus 3s ease-out both; border-radius: 12px; }
@keyframes tl-focus { 0%, 55% { box-shadow: 0 0 0 2px var(--f-accent, #1d9bf0), 0 0 0 6px color-mix(in srgb, var(--f-accent, #1d9bf0) 25%, transparent); } 100% { box-shadow: 0 0 0 2px transparent, 0 0 0 6px transparent; } }
.tl-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--f-border); }
.tl-body { flex: 1; min-width: 0; }
/* 見出しは折り返さず、長い名前は省略して「X で開く」を常に右上端に置く */
.tl-post-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.tl-handle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--f-muted); }
/* 名前と ID の切り替えボタン。is-stacked（名前と ID）は ID を 2 行目に折り返してアイコンの横に上下に並べる */
button.tl-author { display: grid; grid-template-columns: minmax(0, max-content) max-content; justify-content: start; align-items: baseline; column-gap: 4px; flex: 0 1 auto; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.tl-author > .tl-marks { grid-column: 2; margin-left: 0; }
button.tl-author.is-stacked > .tl-handle, button.tl-author.is-stacked > .tl-quote-handle { grid-column: 1 / -1; }
/* 名前と ID はアイコンの高さ（投稿 40px）を 2 行で等分し、名前の上端と ID の下端をアイコンにそろえる */
.tl-post-head:has(> .is-stacked) { align-items: flex-start; }
.tl-post-head > .is-stacked { grid-template-rows: 20px 20px; }
.tl-post-head > .is-stacked > .tl-name, .tl-post-head > .is-stacked > .tl-handle { line-height: 20px; }
.tl-post-head > .is-stacked > .tl-marks { align-self: center; }
/* スレッド内の返信はアイコンが見出しの中で 20px なので、名前と ID のときだけ 32px に広げて 16px の 2 行で等分する */
.tl-post-head:has(> .is-stacked) > .tl-avatar { width: 32px; height: 32px; align-self: flex-start; }
.tl-post-head > .tl-avatar ~ .is-stacked { grid-template-rows: 16px 16px; }
.tl-post-head > .tl-avatar ~ .is-stacked > .tl-name, .tl-post-head > .tl-avatar ~ .is-stacked > .tl-handle { line-height: 16px; }
/* 名前の横の印: 認証済みのチェックマーク（X。青。企業は金、政府は灰）と鍵アカウントの錠。.tl-marks に並べる */
.tl-marks { display: inline-flex; align-items: center; gap: 3px; align-self: center; margin-left: -4px; }
.tl-lock { align-self: center; font-size: 13px; color: var(--f-muted); }
.tl-verified { font-size: 15px; color: #1d9bf0; }
.tl-verified.is-business { color: #e2b719; }
.tl-verified.is-government { color: #829aab; }
/* 「X で開く」: ふちの無いアイコンだけ（数値バーの項目と同じ 18px・薄い色。押せる範囲は丸く広げる）。見出しの右端に、名前と ID の高さの中央 */
.tl-open { display: inline-flex; align-items: center; justify-content: center; flex: none; align-self: center; margin: -6px -6px -6px auto; padding: 6px; border: 0; border-radius: 50%; color: var(--f-muted); text-decoration: none; transition: color .15s, background .15s; }
.tl-open:hover, .tl-open:focus-visible { color: var(--tl-accent); background: var(--f-border); outline: none; }
.tl-open-icon svg { width: 18px; height: 18px; }
/* X で消えた投稿（サーバーの deleted）: 「X で開く」の代わりの印。内容は DB にあるものをそのまま出し、全体を少し薄くする。内容の残っていないもの（unavailable）は印だけの行 */
.tl-deleted { flex: none; align-self: center; margin-left: auto; font-size: 11px; font-weight: 700; color: var(--f-muted); white-space: nowrap; }
.tl-post.is-deleted > .tl-body > :not(.tl-post-head), .tl-quote.is-deleted > :not(.tl-quote-head) { opacity: .7; }
/* X のアーカイブから復元した投稿（サーバーの archived。持ち主だけ）: 「削除済みのポスト」の代わりに丸い枠の「アーカイブ済みポスト」。内容は復元したものなので消えた投稿ほどは薄くしない */
.tl-deleted.tl-archived { padding: 0 7px; border: 1px solid currentColor; border-radius: 999px; line-height: 16px; color: var(--tl-accent); opacity: .85; }
.tl-post.is-archived > .tl-body > :not(.tl-post-head), .tl-quote.is-archived > :not(.tl-quote-head) { opacity: .9; }
.tl-post.is-unavailable { padding: 8px 0; }
.tl-post.is-unavailable .tl-post-head, .tl-quote.is-unavailable .tl-quote-head { min-height: 0; }
.tl-post.is-unavailable .tl-deleted, .tl-quote.is-unavailable .tl-deleted { margin-left: 0; }
.tl-quote .tl-open { margin: -4px -4px -4px auto; padding: 4px; }
.tl-quote .tl-open-icon svg { width: 15px; height: 15px; }
/* 見出しの「…」（翻訳のメニュー）: 「X で開く」のすぐ右に同じ見た目で */
.tl-more-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; align-self: center; margin: -6px -6px -6px 0; padding: 6px; border: 0; border-radius: 50%; background: none; color: var(--f-muted); cursor: pointer; transition: color .15s, background .15s; -webkit-tap-highlight-color: transparent; }
.tl-more-btn:hover, .tl-more-btn:focus-visible, .tl-more-btn[aria-expanded="true"] { color: var(--tl-accent); background: var(--f-border); outline: none; }
.tl-more-btn svg { width: 18px; height: 18px; }
.tl-quote .tl-more-btn { margin: -4px -4px -4px 0; padding: 4px; }
.tl-quote .tl-more-btn svg { width: 15px; height: 15px; }
.tl-post-head > .tl-deleted + .tl-more-btn, .tl-quote-head > .tl-deleted + .tl-more-btn { margin-left: 6px; }
.tl-reply-to { margin-top: 4px; font-size: 13px; color: var(--f-muted); }   /* 「返信先: @a さんと @b さん」（X が返信の先頭に付けた宛先。timeline.js の replyToLine） */
.tl-reply-to .tl-mention { color: var(--tl-link); text-decoration: none; }
.tl-text { margin-top: 4px; font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-text.is-title { font-weight: 700; }
.tl-text.is-title a { color: inherit; text-decoration: none; }
.tl-text.is-title a:hover { text-decoration: underline; }
.tl-hashtag, .tl-mention { color: var(--tl-link); }
/* 本文中の URL（表示は https:// を削った形。新しいタブで開く） */
.tl-link { color: var(--tl-link); text-decoration: none; overflow-wrap: anywhere; }
.tl-link:hover { text-decoration: underline; }
.tl-unfold { display: block; width: max-content; cursor: pointer; text-decoration: none; }   /* 長いポストの「さらに表示」（押すと消える）。.tl-more は「もっと見る」ボタン */
.tl-unfold:hover { text-decoration: underline; }
.tl-excerpt { margin-top: 6px; font-size: 13px; line-height: 1.7; color: var(--f-muted); }
.tl-thumb { display: block; width: 100%; max-height: 180px; margin-top: 10px; object-fit: cover; border-radius: 12px; border: 1px solid var(--f-border); }
.tl-repost-label { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; font-size: 13px; color: var(--f-muted); }
/* 固定した投稿の印（X のプロフィールの固定。投稿者の上に小さく「固定」） */
.tl-pinned-label { display: flex; align-items: center; gap: 4px; margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--f-muted); }
.tl-pinned-label .tl-icon svg { width: 14px; height: 14px; }
/* プロフィールの「ハイライト」（X Premium）に入れた投稿の印（固定の印と同じ場所。星は X の印と同じ色味） */
.tl-highlight-label { display: flex; align-items: center; gap: 4px; margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--f-muted); }
.tl-highlight-label .tl-icon svg { width: 14px; height: 14px; color: #f5b400; }

/* スレッド: 1 枚のカードに、返信先（一覧に無ければ引用カードの形）→ 投稿 → 返信を重ねる。
   返信は階層で字下げせず（長いスレッドで幅が無くなる）、↪ と小さいアイコンをアイコン列に置いて本文を最初の投稿とそろえる */
.tl-thread > .tl-post + .tl-post { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--f-border); }
/* 別の人の返信の始まり（分岐にせず個別に重ねたもの）: 上との間を少し広く、線を太く */
.tl-thread > .tl-post + .tl-post.tl-fork { margin-top: 20px; padding-top: 20px; border-top-width: 3px; }
.tl-thread > .tl-parent { margin: 0 0 12px; }
/* スレッドの返信は、始祖への直接の返信（1 段め）は字下げせず、返信への返信（2 段め。.tl-nested）を 1 段、3 段め以降（.tl-nested-2）を 2 段
   字下げする。それより深くはしない（段ごとに深くすると長いスレッドで本文の幅が無くなる）。区切り線は字下げしない */
.tl-thread > .tl-post.tl-nested { padding-left: var(--tl-indent, 14px); }
.tl-thread > .tl-post.tl-nested-2 { padding-left: calc(2 * var(--tl-indent, 14px)); }
.tl-reply { --reply-indent: 47px; }
.tl-reply > .tl-body { padding-left: var(--reply-indent); }
.tl-reply > .tl-body > .tl-post-head > .tl-reply-icon { margin-left: calc(-1 * var(--reply-indent)); }
.tl-reply-icon { align-self: center; margin-right: -4px; font-size: 15px; color: var(--f-muted); }
.tl-post-head > .tl-avatar { width: 20px; height: 20px; align-self: center; }

/* 添付メディア。1 枚は切り抜かずに全体を出す。
   2 枚（.is-pair）は X の投稿詳細と同じく、縦横比を保ったまま高さをそろえて横に並べる（幅は縦横比に応じて配分。flex-grow は timeline.js が画像の縦横比から入れる）。
   3 枚以上はセルを正方形にそろえ、同じ高さに切り抜く */
.tl-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.tl-media.is-single { grid-template-columns: minmax(0, 1fr); }
.tl-media-cell { position: relative; min-width: 0; aspect-ratio: 1 / 1; max-height: 320px; }
.tl-media.is-single .tl-media-cell { justify-self: start; max-width: 100%; aspect-ratio: auto; max-height: none; }
.tl-media img, .tl-media video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; border: 1px solid var(--f-border); background: #000; }
.tl-media img { background: none; }
.tl-media.is-single img, .tl-media.is-single video { width: auto; max-width: 100%; height: auto; max-height: 480px; object-fit: contain; }
.tl-media.is-pair { display: flex; align-items: stretch; }
.tl-media.is-pair .tl-media-cell { flex: 1 1 0%; aspect-ratio: auto; max-height: none; }
.tl-media.is-pair img, .tl-media.is-pair video { height: auto; max-height: 320px; }
.tl-badges { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: flex; gap: 4px; }
.tl-media-cell.has-controls .tl-badges { top: 8px; bottom: auto; }   /* 動画の操作ボタンの帯に重ならないよう上へ */
.tl-badge { padding: 0 6px; border: 0; border-radius: 4px; background: rgba(0,0,0,.72); color: #fff; font: 700 12px/20px system-ui, sans-serif; letter-spacing: .02em; }
button.tl-badge { cursor: pointer; }
/* センシティブ設定のメディア: タップするまでぼかしとマスクで隠す（.tl-media.is-sensitive）。表示したら外れる */
.tl-media.is-sensitive { position: relative; }
.tl-media.is-sensitive .tl-media-cell { overflow: hidden; border-radius: 12px; }
.tl-media.is-sensitive img, .tl-media.is-sensitive video { filter: blur(28px) saturate(.8); transform: scale(1.15); pointer-events: none; }
.tl-media.is-sensitive .tl-badges, .tl-media.is-sensitive .tl-alt { display: none; }
.tl-sensitive { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; border: 0; border-radius: 12px; background: rgba(0,0,0,.35); color: #fff; font: inherit; text-align: center; cursor: pointer; }
.tl-sensitive-note { display: flex; align-items: center; gap: 6px; max-width: 100%; font-size: 13px; line-height: 1.5; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.tl-sensitive-note svg { flex: none; width: 18px; height: 18px; }
.tl-sensitive-show { padding: 6px 16px; border-radius: 999px; background: rgba(0,0,0,.72); font-size: 13px; font-weight: 700; line-height: 1.4; }
.tl-sensitive:hover .tl-sensitive-show, .tl-sensitive:focus-visible .tl-sensitive-show { background: rgba(0,0,0,.88); }
.tl-media.is-sensitive.is-single .tl-media-cell { max-width: 100%; }
.tl-alt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; max-height: 100%; overflow: auto; padding: 10px 12px 36px; border-radius: 0 0 12px 12px; background: rgba(0,0,0,.8); color: #fff; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

/* 投票（いちばん票の多い選択肢を濃く） */
.tl-poll { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tl-poll-option { position: relative; isolation: isolate; overflow: hidden; display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 8px; font-size: 14px; }
.tl-poll-option::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--pct); border-radius: 8px; background: color-mix(in srgb, var(--tl-link) 18%, transparent); }
.tl-poll-option.is-leading { font-weight: 700; }
.tl-poll-option.is-leading::before { background: color-mix(in srgb, var(--tl-link) 34%, transparent); }
.tl-poll-label { min-width: 0; overflow-wrap: anywhere; }
.tl-poll-pct { flex: none; display: flex; align-items: baseline; gap: 6px; color: var(--f-muted); }
.tl-poll-votes { font-size: 12px; font-weight: 400; opacity: .85; }   /* % の横の票数 (X は正確な値、Threads は「約」の近似) */
.tl-poll-meta { font-size: 12px; color: var(--f-muted); }
.tl-poll-meta a { color: var(--tl-link); text-decoration: none; }
.tl-poll-trend { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: var(--tl-link); font: inherit; cursor: pointer; }   /* 「推移」（票数の推移のグラフ） */
.tl-poll-trend .tl-icon { display: inline-flex; }
.tl-poll-trend .tl-ic { width: 13px; height: 13px; }
/* 投票の推移のグラフ（timeline.js の renderPollChart）。選択肢の色は固定の並び（dataviz の既定: 青・橙・青緑・黄。ダークは暗い面向けの段） */
.tl-modal-overlay { --tl-series-0: #2a78d6; --tl-series-1: #eb6834; --tl-series-2: #1baf7a; --tl-series-3: #eda100; }
@media (prefers-color-scheme: dark) { .tl-modal-overlay { --tl-series-0: #3987e5; --tl-series-1: #d95926; --tl-series-2: #199e70; --tl-series-3: #c98500; } }
.tl-pollchart { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.tl-pollchart-note { margin: 0; font-size: 12px; color: var(--f-muted); line-height: 1.5; }
.tl-pollchart-figure { position: relative; }
.tl-pollchart-mode { margin: 0; }   /* 割合 / 票数 の切り替え（反応の一覧のタブと同じ見た目） */
.tl-pollchart-svg { display: block; width: 100%; height: auto; font-family: var(--f-font); }
.tl-pollchart-grid { stroke: var(--f-border); stroke-width: 1; }
.tl-pollchart-grid--x { stroke-dasharray: 2 3; }
.tl-pollchart-axis { stroke: var(--f-muted); stroke-width: 1; }
.tl-pollchart-end { stroke: var(--f-muted); stroke-width: 1; stroke-dasharray: 4 3; }
.tl-pollchart-tick { fill: var(--f-muted); font-size: 11px; }
.tl-pollchart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tl-pollchart-dot { stroke: var(--f-surface); stroke-width: 2; }
.tl-pollchart-label { font-size: 12px; fill: var(--f-text); }
.tl-pollchart-s0 { stroke: var(--tl-series-0); color: var(--tl-series-0); }
.tl-pollchart-s1 { stroke: var(--tl-series-1); color: var(--tl-series-1); }
.tl-pollchart-s2 { stroke: var(--tl-series-2); color: var(--tl-series-2); }
.tl-pollchart-s3 { stroke: var(--tl-series-3); color: var(--tl-series-3); }
circle.tl-pollchart-s0 { fill: var(--tl-series-0); } circle.tl-pollchart-s1 { fill: var(--tl-series-1); } circle.tl-pollchart-s2 { fill: var(--tl-series-2); } circle.tl-pollchart-s3 { fill: var(--tl-series-3); }
text.tl-pollchart-label { stroke: none; }
.tl-pollchart-cursor { stroke: var(--f-text); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; pointer-events: none; }
.tl-pollchart-tip { position: absolute; z-index: 2; min-width: 160px; padding: 8px 10px; border: 1px solid var(--f-border); border-radius: 10px; background: var(--f-surface); color: var(--f-text); font-size: 12px; line-height: 1.5; box-shadow: 0 6px 20px rgba(0,0,0,.14); pointer-events: none; }
.tl-pollchart-tip[hidden] { display: none; }
.tl-pollchart-tip-time { margin-bottom: 4px; color: var(--f-muted); }
.tl-pollchart-tip-row { display: flex; align-items: center; gap: 6px; }
.tl-pollchart-tip-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-pollchart-tip-value { flex: none; font-variant-numeric: tabular-nums; }
.tl-pollchart-tip-total { margin-top: 4px; color: var(--f-muted); }
.tl-pollchart-swatch { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: currentColor; }
.tl-pollchart-legend { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.tl-pollchart-legend li { display: flex; align-items: center; gap: 8px; }
.tl-pollchart-legend-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tl-pollchart-legend-value { flex: none; color: var(--f-muted); font-variant-numeric: tabular-nums; }
.tl-pollchart-table summary { cursor: pointer; font-size: 13px; color: var(--tl-link); }
.tl-pollchart-table table { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 12px; }
.tl-pollchart-table th, .tl-pollchart-table td { padding: 4px 6px; border-bottom: 1px solid var(--f-border); text-align: left; vertical-align: top; }
.tl-pollchart-table th { color: var(--f-muted); font-weight: 600; }
.tl-pollchart-num { text-align: right !important; font-variant-numeric: tabular-nums; }
/* リンクカード（X の投稿の外部リンクの先が書いた OGP。X と同じく、画像・投票・引用が無いときだけ末尾側の URL をカードにする）。
   小さい形: 左に正方形のサムネイル（無ければリンクのアイコン）、右にドメイン・タイトル・説明。カード全体がリンク */
.tl-linkcard { display: flex; margin-top: 10px; border: 1px solid var(--f-border); border-radius: 16px; overflow: hidden; color: inherit; text-decoration: none; background: var(--f-card); transition: background .15s; }
.tl-linkcard:hover { background: color-mix(in srgb, var(--f-text) 5%, var(--f-card)); }
.tl-linkcard-img { position: relative; flex: none; width: 108px; min-height: 108px; align-self: stretch; border-right: 1px solid var(--f-border); background: color-mix(in srgb, var(--f-text) 6%, var(--f-card)); }
.tl-linkcard-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-linkcard-icon { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 28px; color: var(--f-muted); }
.tl-linkcard-body { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 10px 12px; font-size: 14px; line-height: 1.4; }
.tl-linkcard-domain { font-size: 13px; color: var(--f-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-linkcard-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tl-linkcard-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 13px; color: var(--f-muted); }
/* 大きい形（summary_large_image）: 横長の画像の左下にタイトルを重ね、下に「場所: ドメイン」 */
.tl-linkcard.is-large { flex-direction: column; border: 0; border-radius: 0; overflow: visible; background: none; }
.tl-linkcard.is-large .tl-linkcard-img { width: 100%; min-height: 0; aspect-ratio: 1.91 / 1; border: 1px solid var(--f-border); border-radius: 16px; overflow: hidden; }
.tl-linkcard-overlay { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .77); color: #fff; font-size: 13px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-linkcard-from { margin-top: 4px; padding: 0 2px; font-size: 13px; color: var(--f-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-quote .tl-linkcard { margin-top: 8px; }
.tl-quote .tl-linkcard.is-large .tl-linkcard-img { border-radius: 12px; }
.tl-place { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; color: var(--f-muted); }

/* 引用カード */
/* X スペースのカード（timeline.js の renderSpaceCard。X の画面と同じ紫 #7856ff のカード。白いボタンは見た目だけで、カード全体がスペースへのリンク） */
.tl-spacecard { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 16px; border-radius: 16px; background: #7856ff; color: #fff; text-decoration: none; transition: filter .15s; }
.tl-spacecard:hover { filter: brightness(1.06); }
.tl-spacecard-head { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; }
.tl-spacecard-avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, .25); }
.tl-spacecard-host { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-spacecard-host .tl-verified, .tl-spacecard-host .tl-lock { color: #fff; }
.tl-spacecard-badge { flex: none; padding: 1px 8px; border-radius: 6px; background: rgba(255, 255, 255, .3); font-size: 12px; font-weight: 600; }
.tl-spacecard-title { font-size: 20px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.tl-spacecard-status { display: flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 14px; opacity: .95; }
.tl-spacecard-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.tl-spacecard-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: tl-space-pulse 1.4s ease-in-out infinite; }
@keyframes tl-space-pulse { 50% { opacity: .35; } }
.tl-spacecard-button { display: block; padding: 11px 16px; border-radius: 9999px; background: #fff; color: #0f1419; font-size: 15px; font-weight: 700; text-align: center; }
.tl-spacecard:hover .tl-spacecard-button { background: #eff3f4; }
.tl-quote .tl-spacecard { padding: 12px; }
.tl-quote .tl-spacecard-title { font-size: 17px; }
/* X のトレンド（ニュース）のカード（timeline.js の renderTrendCard）。テーマの地色と文字色（ライトは白地に黒、ダークは黒地に白）に時刻・分類、見出し、関連する人のアイコン、説明（全文。画像は出さない） */
/* 地と文字はライト / ダークで反転（ライト: 白地に黒、ダーク: 黒地に白。端末の設定と、テーマの data-md-mode / data-fl-mode の固定に従う）。--f-card は半透明のことがあるので使わない */
.tl-trendcard { --tl-trend-bg: #fff; --tl-trend-fg: #0f1419; display: block; margin-top: 10px; border: 1px solid var(--f-border); border-radius: 16px; overflow: hidden; background: var(--tl-trend-bg); color: var(--tl-trend-fg); text-decoration: none; transition: filter .15s; }
@media (prefers-color-scheme: dark) { .tl-trendcard { --tl-trend-bg: #000; --tl-trend-fg: #e7e9ea; } }
[data-md-mode="light"] .tl-trendcard, [data-fl-mode="light"] .tl-trendcard { --tl-trend-bg: #fff; --tl-trend-fg: #0f1419; }
[data-md-mode="dark"] .tl-trendcard, [data-fl-mode="dark"] .tl-trendcard { --tl-trend-bg: #000; --tl-trend-fg: #e7e9ea; }
.tl-trendcard:hover { filter: brightness(.96); }
.tl-trendcard-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.tl-trendcard-meta { font-size: 14px; color: color-mix(in srgb, var(--tl-trend-fg) 65%, var(--tl-trend-bg)); }
.tl-trendcard-title { font-size: 19px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.tl-trendcard-people { display: flex; align-items: center; }
.tl-trendcard-avatar { width: 28px; height: 28px; margin-left: -8px; border: 2px solid var(--tl-trend-bg); border-radius: 50%; object-fit: cover; background: color-mix(in srgb, var(--tl-trend-fg) 15%, var(--tl-trend-bg)); }
.tl-trendcard-avatar:first-child { margin-left: 0; }
.tl-trendcard-desc { margin-top: 4px; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.tl-quote .tl-trendcard-title { font-size: 16px; }
.tl-quote { display: block; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--f-border); border-radius: 14px; }
.tl-quote-head { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 13px; }
.tl-quote.has-avatar { padding-left: 38px; }
.tl-quote.has-avatar > .tl-quote-head > .tl-quote-avatar { margin-left: -26px; }
.tl-quote-avatar { width: 20px; height: 20px; margin-right: 2px; border-radius: 50%; object-fit: cover; flex: none; }
.tl-quote-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.tl-quote-handle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--f-muted); }
.tl-quote-head .tl-open { flex: none; margin-left: auto; }
/* 引用カードの名前と ID はアイコンを 32px に広げ、16px の 2 行で等分する */
.tl-quote.has-avatar:has(> .tl-quote-head > .is-stacked) { padding-left: 50px; }
.tl-quote.has-avatar > .tl-quote-head:has(> .is-stacked) > .tl-quote-avatar { width: 32px; height: 32px; margin-left: -38px; }
.tl-quote-head > .is-stacked { grid-template-rows: 16px 16px; }
.tl-quote-head > .is-stacked > .tl-quote-name, .tl-quote-head > .is-stacked > .tl-quote-handle { line-height: 16px; }
.tl-quote-head > .is-stacked > .tl-quote-handle { font-size: 12px; }
.tl-quote-head > .is-stacked > .tl-marks { align-self: center; }
.tl-quote-text { margin-top: 4px; font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-quote .tl-media { margin-top: 8px; }
.tl-quote-nested { margin-top: 8px; }
.tl-quote-inner { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; color: var(--f-muted); }

/* いいね・リポスト・返信・表示回数と日時 */
/* 数値バー（返信・リポスト・引用・いいね・表示回数）。指で押せる高さ（36px）にして、自分の X の投稿ではボタン（タップで反応の一覧のモーダル）。
   左端のボタンの余白ぶんだけ左に寄せて、アイコンが本文の左端にそろうようにする。日時は右端に寄せる */
.tl-metrics { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 8px 0 -4px -10px; font-size: 13px; color: var(--f-muted); }
.tl-quote .tl-metrics { margin: 4px 0 -2px -7px; font-size: 12px; }
.tl-metric { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; font-variant-numeric: tabular-nums; }
.tl-quote .tl-metric { min-height: 28px; padding: 3px 7px; gap: 4px; }
.tl-metric .tl-icon svg { width: 18px; height: 18px; }
.tl-quote .tl-metric .tl-icon svg { width: 15px; height: 15px; }
button.tl-metric { cursor: pointer; transition: color .15s, background .15s; -webkit-tap-highlight-color: transparent; }
button.tl-metric:hover, button.tl-metric:focus-visible { background: var(--f-border); color: var(--f-text); outline: none; }
.tl-metrics > .tl-time, .tl-metrics > .tl-quote-date { margin-left: auto; padding: 0 0 0 8px; }
/* スレッドの分岐のページング（同じ返信先を持つ兄弟）。数値バーの左に ‹ 2/3 › */
.tl-branch { display: inline-flex; align-items: center; gap: 0; margin: 0 4px 0 2px; font-size: 13px; color: var(--f-muted); font-variant-numeric: tabular-nums; }
/* ‹ ›: 丸で囲まず大きな山形。左右それぞれ 48×36px のタップ範囲（押せる側を広く） */
.tl-branch-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--f-text); font: inherit; cursor: pointer; }
.tl-branch-btn .tl-ic { width: 24px; height: 24px; stroke-width: 2.2; }
.tl-branch-btn.is-prev .tl-ic { transform: rotate(180deg); }
.tl-branch-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--tl-accent) 12%, transparent); color: var(--tl-accent); }
.tl-branch-btn:active:not(:disabled) { background: color-mix(in srgb, var(--tl-accent) 22%, transparent); }
.tl-branch-btn:disabled { opacity: .25; cursor: default; }
.tl-branch-pos { min-width: 2.6em; text-align: center; }
/* 自分がいいねした投稿: ハートを塗りつぶし、数字もピンク（X と同じ色） */
.tl-metric.is-liked { color: #f91880; }
.tl-metric.is-liked .tl-icon svg { fill: currentColor; }
/* 自分のアカウントがリポスト済み（reposted_by）: X と同じ緑（矢印は線なので塗らない） */
.tl-metric.is-reposted { color: #00ba7c; }
/* 自分のアカウントがブックマーク済み（持ち主にだけ bookmarked_by が来る）: X と同じ青で塗る */
.tl-metric.is-bookmarked { color: #1d9bf0; }
/* いいねした人の印（返信先の相手・引用した人・本文で @ で呼んだ人）: いいねの右にアイコン、右下に赤いハート */
.tl-partner-like { position: relative; display: inline-flex; flex: none; width: 24px; height: 24px; margin: 0 4px 0 -4px; }
.tl-partner-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--f-border); }
.tl-partner-heart { position: absolute; right: -3px; bottom: -3px; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--f-card); color: #f91880; }
.tl-partner-heart svg { width: 9px; height: 9px; fill: currentColor; }
button.tl-time, button.tl-quote-date { padding: 0; border: 0; background: none; color: var(--f-muted); font: inherit; font-variant-numeric: tabular-nums; white-space: pre; text-align: right; line-height: 1.25; cursor: pointer; -webkit-tap-highlight-color: transparent; }   /* 絶対表記は日付と時刻の 2 行（右寄せ） */

/* 翻訳バー */
.tl-tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--f-muted); }
.tl-tr-icon { font-size: 14px; color: #0f2b46; color: color-mix(in srgb, var(--f-text, #0f2b46) 70%, #0f2b46); }   /* DeepL のロゴ (timeline.js の ICON.deepl)。DeepL の紺を、テーマの文字色に寄せる (暗い配色では文字色が白いので明るい紺灰になる。color-scheme はテーマが必ずしも dark にしないので使わない) */
.tl-tr-icon .tl-ic-deepl { display: block; width: 1em; height: 1em; }
.tl-tr-wait { color: var(--f-muted); }   /* 訳をサーバーに頼んでいる間の「翻訳中…」 */
.tl-tr-spin { display: inline-flex; width: 14px; height: 14px; color: var(--tl-link); }   /* X 風のスピナー (timeline.js の ICON.spinner)。X の青 */
.tl-tr-spin .tl-ic { width: 100%; height: 100%; animation: tl-spin .75s linear infinite; }   /* 0.75 秒で 1 回転（0deg → 360deg） */
.tl-tr-toggle { padding: 0; border: 0; background: none; color: var(--tl-link); font: inherit; cursor: pointer; }
.tl-tr-toggle:hover { text-decoration: underline; }
@keyframes tl-fade { from { opacity: 0; } to { opacity: 1; } }
.tl-text.is-fading-in, .tl-quote-text.is-fading-in { animation: tl-fade .5s ease-out both; }   /* 原文 / 訳文の切り替え。X の本文の切り替えと同じ (0.5s・ease-out・opacity 0→1・fill-mode both) */
/* 訳文のトークン表示（設定でオプトイン） */
.is-streaming .tok { opacity: 0; }
.is-streaming .tok.is-shown { opacity: 1; }
.is-token-waiting .tok-skeleton { border-radius: 4px; background-image: linear-gradient(90deg, var(--f-border) 0%, transparent 40%, var(--f-border) 80%); background-size: 200% 100%; background-attachment: fixed; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: tl-token-skeleton 1.4s linear infinite; }
.is-token-waiting .tok { color: transparent; }
@keyframes tl-token-skeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.is-streaming .tok.is-wiping {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(50% - 16px), transparent 50%); mask-image: linear-gradient(90deg, #000 calc(50% - 16px), transparent 50%);
  -webkit-mask-size: 200% 100%; mask-size: 200% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: tl-token-wipe .35s linear forwards;
}
@keyframes tl-token-wipe { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .is-token-waiting .tok-skeleton, .tl-text.is-fading-in { animation: none; }
  .is-streaming .tok { opacity: 1; }
  .is-streaming .tok.is-wiping { animation: none; -webkit-mask-image: none; mask-image: none; }
}

/* ギャラリー（pixiv の作品） */
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.tl-work { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--tl-radius); border: 1px solid var(--f-border); background: var(--f-card); }
.tl-work img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.tl-work:hover img { transform: scale(1.04); }
.tl-work-badge { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; }
.tl-work-caption { position: absolute; inset: auto 0 0 0; padding: 22px 10px 8px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.tl-work-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 700; }
.tl-work-date { display: block; font-size: 11px; opacity: .85; }

/* 翻訳メニュー（ページの中に fixed で出す） */
.tl-menu { position: fixed; z-index: 250; width: 270px; max-width: calc(100vw - 16px); max-height: min(70vh, 460px); overflow-y: auto; padding: 5px; border: 1px solid var(--f-border); border-radius: 12px; background: var(--f-surface); color: var(--f-text); box-shadow: 0 10px 30px rgba(0,0,0,.18); font-family: var(--f-font); text-align: left; }
.tl-menu[hidden] { display: none; }
.tl-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.tl-menu-item:hover, .tl-menu-item:focus-visible { background: color-mix(in srgb, var(--tl-accent) 10%, transparent); outline: 0; }
.tl-menu-item:disabled { opacity: .5; cursor: default; }
.tl-menu-icon { display: inline-flex; flex: 0 0 16px; font-size: 16px; color: var(--f-muted); }
.tl-menu-item.is-current .tl-menu-icon { color: var(--tl-accent); }
.tl-menu-label { flex: 1; min-width: 0; }
.tl-menu-meta { font-size: 12px; color: var(--f-muted); font-variant-numeric: tabular-nums; }
.tl-menu-meta:empty { display: none; }
.tl-menu .tl-menu-chev { width: 14px; height: 14px; transition: transform .15s; }
.tl-menu-item[aria-expanded="true"] .tl-menu-chev { transform: rotate(90deg); }
.tl-menu-sub { padding-left: 12px; }
.tl-menu-sub[hidden] { display: none; }
.tl-menu-sub.is-scroll { max-height: 220px; overflow-y: auto; }
.tl-menu-sep { height: 1px; margin: 4px 10px; background: var(--f-border); }
.tl-menu-note { margin: 4px 10px 6px; font-size: 12px; line-height: 1.5; color: var(--f-muted); }
.tl-menu-note[hidden] { display: none; }
/* いいねのメニュー（持ち主）: アカウントの行は名前の前にアイコン、いいね済みならハートをピンクに。反応の一覧の「いいねする」はハート付きの丸ボタン */
.tl-menu-avatar { width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; object-fit: cover; vertical-align: -4px; }
.tl-menu-item.is-liked .tl-menu-icon { color: #f91880; }
.tl-menu-item.is-liked .tl-menu-icon svg { fill: currentColor; }
.tl-menu-item.is-reposted .tl-menu-icon { color: #00ba7c; }
.tl-menu-item.is-bookmarked .tl-menu-icon { color: #1d9bf0; }
.tl-menu-item.is-bookmarked .tl-menu-icon svg { fill: currentColor; }
.tl-engage-like .tl-icon svg { width: 14px; height: 14px; }
.tl-menu-source { padding: 6px 10px 8px; }
.tl-menu-source-label { margin-bottom: 4px; font-size: 11px; color: var(--f-muted); }
.tl-menu-source-text { max-height: 10.5em; overflow-y: auto; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* モーダル（言語判定情報・表示設定） */
.tl-modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.45); font-family: var(--f-font); text-align: left; }
.tl-modal-overlay--inside { position: absolute; inset: auto 0; }   /* エディタのプレビュー: 端末の画面の中 (top と height は timeline.js が入れる) */
.tl-modal { --tl-modal-w: 520px; display: flex; flex-direction: column; width: 100%; max-width: var(--tl-modal-w); max-height: 85%; overflow: hidden; border: 1px solid var(--f-border); border-radius: 22px; background: var(--f-surface); color: var(--f-text); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.tl-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--f-border); }
.tl-modal-title { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; }
.tl-modal-close { display: inline-flex; padding: 6px; border: 0; border-radius: 50%; background: none; color: var(--f-muted); font-size: 20px; cursor: pointer; }
.tl-modal-close:hover { background: var(--f-border); color: var(--f-text); }
.tl-modal-body { padding: 4px 18px 18px; overflow-y: auto; }
/* MakeItAQuote（投稿のメニュー › MakeItAQuote › グレースケール / カラーで作成）: できた画像と、保存・開く・共有 */
.tl-ic-miq { border-radius: 50%; object-fit: cover; }
.tl-menu-icon .tl-ic-miq { width: 22px; height: 22px; margin: -3px; }   /* メニューの行の高さは変えずに、ほかのアイコン（16px）より大きく */
.tl-modal-title .tl-ic-miq { width: 26px; height: 26px; margin: -5px 0; }
.tl-miq-lead { margin: 12px 0 0; font-size: 14px; font-weight: 400; line-height: 1.8; }   /* 投稿の本文（.tl-text）と同じ大きさ・太さ */
.tl-miq-image { display: block; width: 100%; height: auto; margin-top: 12px; border: 1px solid var(--f-border); border-radius: 12px; background: #000; }
/* 画像として保存（openSaveImage）: できた PNG は投稿の見た目そのまま（背景は不透明に塗る）なので黒地にしない */
.tl-shot-image { background: none; }
.tl-miq-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.tl-miq-actions-left, .tl-miq-actions-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tl-miq-actions-right { margin-left: auto; }
.tl-miq-btn:disabled { opacity: .5; cursor: default; }
/* アカウントの選択: アイコンと名前 / @ID を上下に。ボタン（今の選択）とメニューの行（.tl-menu-item.tl-miq-acc）で同じ部品 */
.tl-miq-account { max-width: 240px; padding: 4px 10px 4px 4px; gap: 8px; text-align: left; }
.tl-miq-acc-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; background: var(--f-border); }
.tl-miq-acc-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tl-miq-acc-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-miq-acc-handle { font-size: 11px; color: var(--f-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-menu-item.tl-miq-acc { gap: 10px; padding: 6px 10px; }
.tl-menu-item.tl-miq-acc .tl-miq-acc-avatar { width: 36px; height: 36px; }
.tl-menu-item.tl-miq-acc .tl-miq-acc-text { flex: 1; }
.tl-menu-item.tl-miq-acc .tl-miq-acc-name { font-size: 14px; }
.tl-menu-item.tl-miq-acc .tl-miq-acc-handle { font-size: 12px; }
.tl-miq-acc-check { flex: none; color: var(--tl-accent); }
.tl-miq-acc-check .tl-ic { width: 16px; height: 16px; }
.tl-miq-chev { margin-left: -2px; }
.tl-miq-chev .tl-ic { width: 14px; height: 14px; transform: rotate(90deg); }
[aria-expanded="true"] > .tl-miq-chev .tl-ic { transform: rotate(-90deg); }
/* 再生成の分割ボタン: 色は反転（文字色の背景に面の色の文字）。左が「同じ設定で描き直す」、線で分けた右の ▾ が「カラー / グレー」のメニュー */
.tl-miq-split { display: inline-flex; align-items: stretch; border-radius: 999px; overflow: hidden; background: var(--f-text); color: var(--f-surface); }
.tl-miq-split-main, .tl-miq-split-arrow { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.tl-miq-split-main { padding: 7px 10px 7px 14px; }
.tl-miq-split-arrow { padding: 7px 8px 7px 6px; border-left: 1px solid color-mix(in srgb, var(--f-surface) 35%, transparent); }
.tl-miq-split-arrow .tl-miq-chev { margin-left: 0; }
.tl-miq-split-main:hover, .tl-miq-split-arrow:hover, .tl-miq-split-main:focus-visible, .tl-miq-split-arrow:focus-visible { background: color-mix(in srgb, var(--f-surface) 18%, transparent); outline: 0; }
.tl-miq-split-main:disabled, .tl-miq-split-arrow:disabled { opacity: .5; cursor: default; }
.tl-miq-stage { min-height: 120px; }
.tl-modal:has(> .tl-miq) { --tl-modal-w: 760px; }   /* 保存・開く・共有とアカウント・再生成が 1 列に並ぶ幅 */
.tl-miq-actions { flex-wrap: nowrap; }
@media (max-width: 719px) { .tl-miq-actions { flex-wrap: wrap; } }
.tl-miq-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--f-border); border-radius: 999px; background: none; color: var(--f-text); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.tl-miq-btn:hover, .tl-miq-btn:focus-visible { background: color-mix(in srgb, var(--tl-accent) 10%, transparent); outline: 0; }
.tl-miq-btn .tl-ic { width: 16px; height: 16px; }
.tl-miq-note { margin: 10px 0 0; font-size: 12px; color: var(--f-muted); }
.tl-miq .tl-placeholder { padding: 24px 0; }
/* 反応の一覧（数値バーのモーダル）。見出しに件数と取得時刻、人はアイコン・名前・ID の行、引用・リプライは引用カード */
/* 反応の一覧のモーダル: 高さいっぱいに開き、本文を上下に分ける。上 30% はその投稿のプレビュー（引用カード）、下 70% は一覧。どちらも多ければその中でスクロール */
.tl-modal--engage { height: 100%; }
.tl-modal--engage .tl-modal-body { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
.tl-engage-preview { flex: 0 0 30%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px solid var(--f-border); }
.tl-engage-preview > .tl-engage-post { margin: 6px 0 10px; }
.tl-engage-main { flex: 1 1 70%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.tl-engage-tabs { margin: 10px 0 2px; }
.tl-engage-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 10px 0 6px; font-size: 12px; color: var(--f-muted); }
.tl-engage-summary { font-size: 14px; font-weight: 700; color: var(--f-text); }
.tl-engage-meta { display: inline-flex; align-items: center; gap: 10px; }
.tl-engage-refresh { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--f-border); border-radius: 999px; background: none; color: var(--f-muted); font: inherit; font-size: 12px; cursor: pointer; }
.tl-engage-refresh:hover { color: var(--tl-accent); border-color: var(--tl-accent); }
.tl-engage-updating { display: inline-flex; align-items: center; gap: 4px; color: var(--f-muted); }   /* 返信: 控えを出しながら最新を取っている印 */
.tl-engage-updating .tl-ic { width: 14px; height: 14px; }
.tl-engage-update-error { color: var(--f-muted); }
.tl-engage-error { margin: 4px 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--f-border); font-size: 13px; line-height: 1.6; }
.tl-engage-list { display: flex; flex-direction: column; }
.tl-engage-list > .tl-quote { margin-top: 8px; }
.tl-engage-list > .tl-engage-nested { margin-left: 16px; }
.tl-person { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--f-border); color: inherit; text-decoration: none; }
.tl-person:last-child { border-bottom: 0; }
.tl-person-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--f-border); }
.tl-person-text { min-width: 0; }
.tl-person-name { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-person-name .tl-marks { margin-left: 0; }
.tl-person-handle { font-size: 13px; color: var(--f-muted); }
a.tl-person:hover .tl-person-name { color: var(--tl-accent); }
/* 「いいねしていないリプライ」（… メニュー。反応の一覧のモーダルの unliked）: 返信ごとの「いいね」ボタン。いいねしたら薄く */
.tl-engage-note { margin: 0 0 4px; font-size: 12px; line-height: 1.6; color: var(--f-muted); }
.tl-engage-list > .tl-unliked-item { margin-top: 8px; transition: opacity .2s; }
.tl-unliked-item > .tl-quote { margin: 0; }
.tl-unliked-item.is-done { opacity: .5; }
.tl-unliked-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 2px; }
.tl-unliked-like .tl-ic { width: 14px; height: 14px; }
.tl-unliked-like.is-liked { color: #f91880; border-color: color-mix(in srgb, #f91880 45%, transparent); }
.tl-unliked-like.is-liked .tl-ic { fill: currentColor; }
.tl-unliked-error { font-size: 12px; color: #e0245e; }
.tl-engage-refresh:disabled { opacity: .6; cursor: default; }
/* 自動フォロージョブ（… メニューの「自動フォロージョブを作成」。openFollowJob） */
.tl-fj-preview { max-height: 220px; margin: 6px 0 0; padding-bottom: 10px; overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px solid var(--f-border); }
.tl-fj-preview > .tl-engage-post { margin: 0; }
.tl-fj-status { margin: 12px 0 4px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--f-muted) 10%, transparent); }
.tl-fj-state { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.tl-fj-state.is-on { color: #00ba7c; }
.tl-fj-state.is-running { color: var(--tl-accent); }
.tl-fj-state.is-running .tl-ic { width: 16px; height: 16px; animation: tl-spin .75s linear infinite; }
.tl-fj-facts { margin-top: 4px; font-size: 12px; line-height: 1.6; color: var(--f-muted); }
.tl-fj-status .tl-engage-error { margin: 8px 0 0; }
.tl-fj-kind-title { display: inline-flex; align-items: center; gap: 6px; }
.tl-fj-kind-title .tl-ic { width: 16px; height: 16px; }
.tl-fj-account { padding: 4px 0; font-size: 14px; font-weight: 700; }
.tl-fj-hint { margin: 2px 0 6px; font-size: 12px; line-height: 1.6; color: var(--f-muted); }
.tl-fj-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; }
.tl-fj-primary { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border: 0; border-radius: 999px; background: var(--tl-accent); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.tl-fj-primary .tl-ic { width: 16px; height: 16px; }
.tl-fj-primary:disabled, .tl-fj-mini:disabled { opacity: .55; cursor: default; }
.tl-fj-actions .tl-engage-refresh { padding: 7px 14px; font-size: 13px; }
.tl-fj-board { margin-left: auto; text-decoration: none; }   /* 「ジョブ管理」へ（右端） */
.tl-fj-danger, .tl-fj-danger:hover { color: #e0245e; }
.tl-fj-danger:hover { border-color: #e0245e; }
.tl-fj-note { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--f-muted); }
.tl-fj-note.is-error { color: #e0245e; }
.tl-fj-note[hidden] { display: none; }
.tl-fj-chips { margin: 2px 0 4px; }
.tl-fj-list { display: flex; flex-direction: column; }
.tl-fj-person { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--f-border); }
.tl-fj-person > .tl-person { flex: 1; min-width: 0; border-bottom: 0; }
.tl-fj-person.is-skipped > .tl-person, .tl-fj-person.is-already > .tl-person { opacity: .6; }
.tl-fj-side { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 48%; text-align: right; }
.tl-fj-side-line { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--f-muted); }
.tl-fj-via { display: inline-flex; gap: 3px; color: var(--f-muted); }
.tl-fj-via .tl-ic { width: 13px; height: 13px; }
.tl-fj-badge { padding: 1px 8px; border-radius: 999px; background: var(--f-border); color: var(--f-text); font-size: 11px; white-space: nowrap; }
.tl-fj-badge.is-todo { background: color-mix(in srgb, var(--tl-accent) 16%, transparent); color: var(--tl-accent); }
.tl-fj-badge.is-followed { background: color-mix(in srgb, #00ba7c 18%, transparent); color: #00a36d; }
.tl-fj-badge.is-pending { background: color-mix(in srgb, #f5a623 22%, transparent); color: #b7791f; }
.tl-fj-badge.is-error { background: color-mix(in srgb, #e0245e 16%, transparent); color: #e0245e; }
.tl-fj-when { white-space: nowrap; }
.tl-fj-detail { font-size: 11px; line-height: 1.4; color: #e0245e; }
.tl-fj-mini { padding: 3px 10px; border: 1px solid var(--f-border); border-radius: 999px; background: none; color: var(--f-muted); font: inherit; font-size: 12px; cursor: pointer; }
.tl-fj-mini:hover { color: var(--tl-accent); border-color: var(--tl-accent); }
.tl-fj-more { align-self: center; }
.tl-fj-more[hidden] { display: none; }
.tl-fj-job { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--f-border); }
.tl-fj-job-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-fj-job-post { overflow: hidden; color: var(--f-text); font-size: 13px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
a.tl-fj-job-post:hover { text-decoration: underline; }
.tl-fj-job-text small { font-size: 12px; line-height: 1.5; color: var(--f-muted); }
.tl-section-label { margin: 16px 0 6px; font-size: 12px; letter-spacing: .06em; color: var(--f-muted); }
.tl-note-text { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--f-muted); }
.tl-note-text[hidden] { display: none; }
.tl-checks { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 4px 0; }
.tl-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.tl-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--tl-accent); }
.tl-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; cursor: pointer; }
.tl-set-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-set-label small { font-size: 12px; line-height: 1.5; color: var(--f-muted); }
.tl-set-all { margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--f-muted) 10%, transparent); font-weight: 700; }
.tl-set-all small { font-weight: 400; }
.tl-select { max-width: 60%; padding: 6px 10px; border: 1px solid var(--f-border); border-radius: 10px; background: var(--f-surface); color: var(--f-text); font: inherit; font-size: 13px; }
.tl-switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 40px; height: 24px; margin: 0; border-radius: 999px; background: var(--f-border); cursor: pointer; transition: background .15s; }
.tl-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.tl-switch:checked { background: var(--tl-accent); }
.tl-switch:checked::after { transform: translateX(16px); }
.tl-switch:indeterminate { background: color-mix(in srgb, var(--tl-accent) 45%, var(--f-border)); }
.tl-switch:indeterminate::after { transform: translateX(8px); }
.tl-switch.is-small { width: 32px; height: 20px; }
.tl-switch.is-small::after { width: 14px; height: 14px; }
.tl-switch.is-small:checked::after { transform: translateX(12px); }
.tl-search { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; padding: 8px 12px; border: 1px solid var(--f-border); border-radius: 12px; background: var(--f-surface); color: var(--f-muted); cursor: text; }
.tl-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--f-text); font: inherit; font-size: 14px; }
.tl-lang-label { margin: 14px 0 6px; font-size: 12px; color: var(--f-muted); }
.tl-lang-section[hidden], .tl-lang[hidden] { display: none; }
.tl-lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.tl-lang { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 10px; background: color-mix(in srgb, var(--f-muted) 10%, transparent); font-size: 13px; cursor: pointer; }
.tl-lang.is-off { background: none; box-shadow: inset 0 0 0 1px var(--f-border); color: var(--f-muted); }
.tl-lang.is-focus { box-shadow: inset 0 0 0 2px var(--tl-accent); }
.tl-lang-name { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.tl-lid-meta { margin: 0; font-size: 14px; line-height: 1.6; }
.tl-lid-row { display: grid; grid-template-columns: minmax(6em, auto) 1fr 4.5em; align-items: center; gap: 10px; padding: 4px 0; font-size: 14px; }
.tl-lid-bar { height: 6px; overflow: hidden; border-radius: 999px; background: var(--f-border); }
.tl-lid-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--tl-accent); }
.tl-lid-pct { text-align: right; font-size: 13px; color: var(--f-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
  .tl-entry { padding: 12px; }
  .tl-thread > .tl-post.tl-nested { padding-left: var(--tl-indent, 10px); }
  .tl-thread > .tl-post.tl-nested-2 { padding-left: calc(2 * var(--tl-indent, 10px)); }
}

/* 一覧を列に敷き詰める (メイソンリー。amanetoki.com のつぶやきを移植)。timeline.js が cfg.columns のあるとき .tl-list に is-masonry を付け、
   各項目の高さ + すき間を grid-row の span (1px 刻み) に入れる。「自動」は幅に合わせて最大 4 列 (1 列 300px 以上)、
   表示設定の「横分割数」で数を選ぶと data-columns と --tl-columns で固定する。読み込み中・もっと見る・見張り役は 1 行を使う */
.tl-list.is-masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(300px, calc((100% - 48px) / 4)), 1fr)); column-gap: 16px; row-gap: 0; grid-auto-rows: 1px; align-items: start; }
.tl-list.is-masonry[data-columns] { grid-template-columns: repeat(var(--tl-columns), minmax(0, 1fr)); }
.tl-list.is-masonry > * { min-width: 0; }
.tl-list.is-masonry > .tl-entry { margin-bottom: 0; }
.tl-list.is-masonry > .tl-placeholder, .tl-list.is-masonry > .tl-loader, .tl-list.is-masonry > .tl-more, .tl-list.is-masonry > .tl-sentinel, .tl-list.is-masonry > .tl-noscript { grid-column: 1 / -1; }

/* ===== モーダルのアダプティブデザイン（timeline.js の modal()）=====
   テーマの種類で overlay に修飾子が付く: --material（Android 風）、--liquidglass（iOS 風）、--fluent（Windows 風。版は --v11 / --v10 / --v8 / --v7）。
   どれも無ければ上の既定の見た目。amanetoki.com も同じ JS と CSS なので両サイトで同じ。
   色はテーマの変数（--md-* / --lg-* / --fl-*。folita の公開ページでは .folita-page にある）があればそれ、無ければ --f-*（amanetoki.com の :root）に落とす。
   狭い画面（768px 以下）では material は全画面のダイアログ、liquidglass は画面いっぱいのシート（最大化展開）。広い画面では中央のダイアログ / フォームシート。
   閉じるときは overlay に is-closing が付き、戻りのアニメーションのあとで JS が消す */
@keyframes tl-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tl-modal-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes tl-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes tl-sheet-down { from { transform: none; } to { transform: translateY(100%); } }
@keyframes tl-dialog-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes tl-dialog-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.96); } }
@keyframes tl-window-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.tl-modal-overlay--material, .tl-modal-overlay--liquidglass, .tl-modal-overlay--fluent { animation: tl-modal-fade-in .2s ease-out both; }
.tl-modal-overlay--material.is-closing, .tl-modal-overlay--liquidglass.is-closing, .tl-modal-overlay--fluent.is-closing { animation: tl-modal-fade-out .25s ease-in both; pointer-events: none; }
.tl-modal-grabber { display: none; }
.tl-modal-caption { display: none; }

/* --- material（Android 風）: 広い画面は Material 3 の基本ダイアログ（角 28px、surface-container-high、見出し 24px、影 level 3） --- */
.tl-modal-overlay--material { background: rgba(0, 0, 0, .32); }
.tl-modal-overlay--material .tl-modal { max-width: max(640px, var(--tl-modal-w)); max-height: 90%; border: 0; border-radius: 28px; background: var(--md-surface-container-high, var(--f-surface)); color: var(--md-on-surface, var(--f-text)); box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15); animation: tl-dialog-in .25s cubic-bezier(.05,.7,.1,1) both; }
.tl-modal-overlay--material.is-closing .tl-modal { animation: tl-dialog-out .15s cubic-bezier(.3,0,.8,.15) both; }
.tl-modal-overlay--material .tl-modal-head { padding: 20px 12px 8px 24px; border: 0; }
.tl-modal-overlay--material .tl-modal-title { gap: 12px; font-size: 24px; font-weight: 400; line-height: 32px; letter-spacing: 0; }
.tl-modal-overlay--material .tl-modal-title .tl-icon { color: var(--md-secondary, var(--f-muted)); }
.tl-modal-overlay--material .tl-modal-title .tl-ic { width: 24px; height: 24px; }
.tl-modal-overlay--material .tl-modal-title .tl-ic-miq { width: 28px; height: 28px; margin: 0; }
.tl-modal-overlay--material .tl-modal-close { padding: 8px; color: var(--md-on-surface-variant, var(--f-muted)); }
.tl-modal-overlay--material .tl-modal-close .tl-ic { width: 24px; height: 24px; }
.tl-modal-overlay--material .tl-modal-close:hover { background: color-mix(in srgb, var(--md-on-surface, var(--f-text)) 8%, transparent); color: var(--md-on-surface, var(--f-text)); }
.tl-modal-overlay--material .tl-modal-body { padding: 0 24px 24px; }
/* 部品: M3 のスイッチ（52×32。オフは輪郭とつまみ 16px、オンはつまみ 24px）、輪郭のボタン、4px のセレクト、56px の設定の行 */
.tl-modal-overlay--material .tl-switch { width: 52px; height: 32px; background: var(--md-surface-container-highest, var(--f-border)); box-shadow: inset 0 0 0 2px var(--md-outline, var(--f-muted)); }
.tl-modal-overlay--material .tl-switch::after { top: 8px; left: 8px; width: 16px; height: 16px; background: var(--md-outline, var(--f-muted)); box-shadow: none; }
.tl-modal-overlay--material .tl-switch:checked { background: var(--tl-accent); box-shadow: none; }
.tl-modal-overlay--material .tl-switch:checked::after { top: 4px; left: 4px; width: 24px; height: 24px; background: var(--md-on-primary, #fff); transform: translateX(20px); }
.tl-modal-overlay--material .tl-switch:indeterminate { box-shadow: none; }
.tl-modal-overlay--material .tl-switch:indeterminate::after { top: 6px; left: 6px; width: 20px; height: 20px; background: #fff; transform: translateX(10px); }
.tl-modal-overlay--material .tl-switch.is-small { width: 40px; height: 24px; }
.tl-modal-overlay--material .tl-switch.is-small::after { top: 6px; left: 6px; width: 12px; height: 12px; }
.tl-modal-overlay--material .tl-switch.is-small:checked::after { top: 3px; left: 3px; width: 18px; height: 18px; transform: translateX(16px); }
.tl-modal-overlay--material .tl-miq-btn, .tl-modal-overlay--material .tl-engage-refresh { min-height: 40px; border-color: var(--md-outline, var(--f-border)); color: var(--tl-accent); font-size: 14px; font-weight: 500; }
.tl-modal-overlay--material .tl-miq-account { color: inherit; }
.tl-modal-overlay--material .tl-select { padding: 8px 12px; border-radius: 4px; border-color: var(--md-outline, var(--f-border)); font-size: 14px; }
.tl-modal-overlay--material .tl-section-label { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--md-on-surface-variant, var(--f-muted)); }
.tl-modal-overlay--material .tl-set-row { min-height: 56px; font-size: 16px; }
.tl-modal-overlay--material .tl-set-all, .tl-modal-overlay--material .tl-lang, .tl-modal-overlay--material .tl-engage-error { border-radius: 12px; }
.tl-modal-overlay--material .tl-miq-image { border: 0; border-radius: 16px; }
@media (max-width: 768px) {
  /* 全画面のダイアログ: 上のアプリバー（64px。左に ✕、見出し 22px）、面は surface、下から上がる */
  .tl-modal-overlay--material { padding: 0; align-items: stretch; }
  .tl-modal-overlay--material .tl-modal { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; background: var(--md-surface, var(--f-bg, var(--f-surface))); box-shadow: none; animation: tl-sheet-up .4s cubic-bezier(.05,.7,.1,1) both; }
  .tl-modal-overlay--material.is-closing .tl-modal { animation: tl-sheet-down .25s cubic-bezier(.3,0,.8,.15) both; }
  .tl-modal-overlay--material .tl-modal-head { min-height: 64px; padding: env(safe-area-inset-top) 4px 0 4px; gap: 4px; }
  .tl-modal-overlay--material .tl-modal-close { order: -1; padding: 12px; color: var(--md-on-surface, var(--f-text)); }
  .tl-modal-overlay--material .tl-modal-title { font-size: 22px; line-height: 28px; }
  .tl-modal-overlay--material .tl-modal-body { padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
}

/* --- liquidglass（iOS 風）: 狭い画面は画面いっぱいのシート（上に 10px 残す。角 38px、つまみ、見出し中央 17px/600、右上に丸い ✕）、広い画面はフォームシート --- */
.tl-modal-overlay--liquidglass { background: rgba(0, 0, 0, .3); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", var(--f-font), system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.tl-modal-overlay--liquidglass .tl-modal { position: relative; max-width: max(640px, var(--tl-modal-w)); max-height: 88%; border: 1px solid var(--lg-edge, rgba(255, 255, 255, .5)); border-radius: 26px; background: color-mix(in srgb, var(--f-surface) 90%, transparent); color: var(--f-text); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); box-shadow: 0 20px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.45); animation: tl-dialog-in .3s cubic-bezier(.32,.72,0,1) both; }   /* iOS のシートはほぼ不透明（読みやすさ）。ガラスは部品に */
.tl-modal-overlay--liquidglass.is-closing .tl-modal { animation: tl-dialog-out .2s ease-in both; }
.tl-modal-overlay--liquidglass .tl-modal-grabber { position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: color-mix(in srgb, var(--f-text) 30%, transparent); }
.tl-modal-overlay--liquidglass .tl-modal-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 0; min-height: 56px; padding: 6px 12px 0; border: 0; }
.tl-modal-overlay--liquidglass .tl-modal-title { grid-column: 2; justify-content: center; min-width: 0; font-size: 17px; font-weight: 600; letter-spacing: -.4px; }
.tl-modal-overlay--liquidglass .tl-modal-close { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: color-mix(in srgb, var(--f-text) 9%, transparent); color: var(--f-muted); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--f-text) 10%, transparent); }
.tl-modal-overlay--liquidglass .tl-modal-close .tl-ic { width: 15px; height: 15px; stroke-width: 2.5; }
.tl-modal-overlay--liquidglass .tl-modal-close:hover { background: color-mix(in srgb, var(--f-text) 16%, transparent); color: var(--f-text); }
.tl-modal-overlay--liquidglass .tl-modal-body { padding: 4px 16px 20px; }
/* 部品: iOS のスイッチ（51×31、緑）、丸いガラスのボタン（青い文字）、灰色の塗りのセレクト、44px の行と区切りの髪線 */
.tl-modal-overlay--liquidglass .tl-switch { width: 51px; height: 31px; background: color-mix(in srgb, var(--f-text) 16%, transparent); }
.tl-modal-overlay--liquidglass .tl-switch::after { top: 2px; left: 2px; width: 27px; height: 27px; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06); }
.tl-modal-overlay--liquidglass .tl-switch:checked { background: #34c759; }
.tl-modal-overlay--liquidglass .tl-switch:checked::after { transform: translateX(20px); }
.tl-modal-overlay--liquidglass .tl-switch:indeterminate { background: color-mix(in srgb, #34c759 45%, transparent); }
.tl-modal-overlay--liquidglass .tl-switch:indeterminate::after { transform: translateX(10px); }
.tl-modal-overlay--liquidglass .tl-switch.is-small { width: 40px; height: 24px; }
.tl-modal-overlay--liquidglass .tl-switch.is-small::after { width: 20px; height: 20px; }
.tl-modal-overlay--liquidglass .tl-switch.is-small:checked::after { transform: translateX(16px); }
.tl-modal-overlay--liquidglass .tl-switch.is-small:indeterminate::after { transform: translateX(8px); }
.tl-modal-overlay--liquidglass .tl-miq-btn, .tl-modal-overlay--liquidglass .tl-engage-refresh { background: var(--lg-tint, color-mix(in srgb, var(--f-text) 7%, transparent)); border-color: var(--lg-edge, transparent); color: var(--tl-accent); font-size: 15px; letter-spacing: -.2px; }
.tl-modal-overlay--liquidglass .tl-miq-account { color: inherit; }
.tl-modal-overlay--liquidglass .tl-select { padding: 7px 10px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--f-text) 8%, transparent); font-size: 15px; }
.tl-modal-overlay--liquidglass .tl-section-label { font-size: 13px; letter-spacing: -.1px; }
.tl-modal-overlay--liquidglass .tl-set-row { min-height: 44px; padding: 6px 0; font-size: 17px; letter-spacing: -.4px; box-shadow: inset 0 -.5px 0 color-mix(in srgb, var(--f-text) 18%, transparent); }
.tl-modal-overlay--liquidglass .tl-set-row:last-child { box-shadow: none; }
.tl-modal-overlay--liquidglass .tl-set-all, .tl-modal-overlay--liquidglass .tl-lang, .tl-modal-overlay--liquidglass .tl-engage-error { border-radius: 14px; }
.tl-modal-overlay--liquidglass .tl-miq-image { border-color: var(--lg-edge, transparent); border-radius: 18px; }
@media (max-width: 768px) {
  .tl-modal-overlay--liquidglass { padding: 0; align-items: flex-end; }
  .tl-modal-overlay--liquidglass .tl-modal { width: 100%; max-width: none; height: calc(100% - 10px - env(safe-area-inset-top)); max-height: none; border-bottom: 0; border-radius: 38px 38px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.45); animation: tl-sheet-up .45s cubic-bezier(.32,.72,0,1) both; }
  .tl-modal-overlay--liquidglass.is-closing .tl-modal { animation: tl-sheet-down .3s cubic-bezier(.32,.72,0,1) both; }
  .tl-modal-overlay--liquidglass .tl-modal-grabber { display: block; }
  .tl-modal-overlay--liquidglass .tl-modal-head { min-height: 60px; padding-top: 14px; }
  .tl-modal-overlay--liquidglass .tl-modal-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* --- fluent（Windows 風）: ウインドウ。タイトルバー 32px（左にアイコンと 12px の見出し、右端に 46×32 の操作ボタン: 最小化・最大化・閉じる）、
   角丸は Windows 11 の 8px に抑える（10 / 8 は 0、7 は Aero の 6px）。最大化で画面いっぱい（角丸なし）、最小化で下バーの上の小さなタイトルバーだけに --- */
.tl-modal-overlay--fluent { background: rgba(0, 0, 0, .3); font-family: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", "Yu Gothic UI", var(--f-font), sans-serif; }
.tl-modal-overlay--fluent .tl-modal { max-width: max(640px, var(--tl-modal-w)); max-height: 85%; border: 1px solid var(--fl-stroke-strong, color-mix(in srgb, var(--f-text) 16%, transparent)); border-radius: 8px; background: var(--fl-surface, var(--f-surface)); color: var(--f-text); box-shadow: 0 32px 64px rgba(0,0,0,.28), 0 2px 21px rgba(0,0,0,.2); animation: tl-window-in .25s cubic-bezier(0,0,0,1) both; }
.tl-modal-overlay--fluent.is-closing .tl-modal { animation: tl-modal-fade-out .15s ease-out both; }
.tl-modal-overlay--fluent .tl-modal-head { height: 32px; min-height: 32px; padding: 0 0 0 12px; gap: 0; border: 0; -webkit-user-select: none; user-select: none; }
.tl-modal-overlay--fluent .tl-modal-title { gap: 10px; min-width: 0; font-size: 12px; font-weight: 400; line-height: 32px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-modal-overlay--fluent .tl-modal-title .tl-icon { color: var(--tl-accent); }
.tl-modal-overlay--fluent .tl-modal-title .tl-ic { width: 16px; height: 16px; }
.tl-modal-overlay--fluent .tl-modal-title .tl-ic-miq { width: 16px; height: 16px; margin: 0; }
.tl-modal-overlay--fluent .tl-modal-caption { display: flex; align-self: stretch; margin-left: auto; }
.tl-modal-overlay--fluent .tl-modal-caption-btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 32px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--f-text); font-size: 10px; cursor: default; }
.tl-modal-overlay--fluent .tl-modal-caption-btn .tl-cap { width: 10px; height: 10px; }
.tl-modal-overlay--fluent .tl-modal-caption-btn:hover { background: var(--fl-subtle, color-mix(in srgb, var(--f-text) 6%, transparent)); color: var(--f-text); }
.tl-modal-overlay--fluent .tl-modal-caption-btn:active { background: color-mix(in srgb, var(--f-text) 4%, transparent); color: var(--f-muted); }
/* 端末に Segoe Fluent Icons (Windows 11) / Segoe MDL2 Assets (Windows 10) があれば (timeline.js の detectSegoeIcons が html.has-segoe-icons を付ける)、
   Windows 10 / 11 の見た目のタイトルバーのボタンは SVG ではなく Windows と同じグリフ (ChromeMinimize / ChromeMaximize / ChromeRestore / ChromeClose) で描く。
   7 / 8 の見た目は SVG のまま。ライトボックスの閉じるも同じ */
html.has-segoe-icons .tl-modal-overlay--fluent:not(.tl-modal-overlay--v7):not(.tl-modal-overlay--v8) .tl-modal-caption-btn .tl-cap,
html.has-segoe-icons .tl-lightbox--fluent:not(.tl-lightbox--v7):not(.tl-lightbox--v8) .tl-lightbox-close .tl-cap { display: none; }
html.has-segoe-icons .tl-modal-overlay--fluent:not(.tl-modal-overlay--v7):not(.tl-modal-overlay--v8) .tl-modal-caption-btn::before,
html.has-segoe-icons .tl-lightbox--fluent:not(.tl-lightbox--v7):not(.tl-lightbox--v8) .tl-lightbox-close::before { font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets"; font-size: 10px; line-height: 1; speak: none; }
html.has-segoe-icons .tl-modal-overlay--fluent:not(.tl-modal-overlay--v7):not(.tl-modal-overlay--v8) .tl-modal-min::before { content: "\e921"; }
html.has-segoe-icons .tl-modal-overlay--fluent:not(.tl-modal-overlay--v7):not(.tl-modal-overlay--v8) .tl-modal-max::before { content: "\e922"; }
html.has-segoe-icons .tl-modal-overlay--fluent:not(.tl-modal-overlay--v7):not(.tl-modal-overlay--v8).is-maximized .tl-modal-max::before { content: "\e923"; }
html.has-segoe-icons .tl-modal-overlay--fluent:not(.tl-modal-overlay--v7):not(.tl-modal-overlay--v8) .tl-modal-close.tl-modal-caption-btn::before,
html.has-segoe-icons .tl-lightbox--fluent:not(.tl-lightbox--v7):not(.tl-lightbox--v8) .tl-lightbox-close::before { content: "\e8bb"; }
.tl-modal-overlay--fluent .tl-modal-close:hover { background: #c42b1c; color: #fff; }
.tl-modal-overlay--fluent .tl-modal-close:active { background: color-mix(in srgb, #c42b1c 90%, transparent); color: rgba(255,255,255,.7); }
.tl-modal-overlay--fluent .tl-modal-close { border-top-right-radius: 7px; }   /* 窓の角丸に沿う */
.tl-modal-overlay--fluent .tl-modal-body { padding: 8px 24px 24px; }
/* 部品: WinUI のトグル（40×20）、4px のボタンとセレクト（下辺が少し濃い） */
/* Windows のトグルスイッチ: 40×24 のトラックに 1px の枠、14px のつまみ (影なし)。オフの色は --fl-switch-* (folita の fluent.css / amanetoki.com の folita.php。
   ライト: トラック #f5f5f5 / 枠 45% の黒 / つまみ #5d5d5d。ダークは WinUI の ControlAltFill / ControlStrongStroke / TextFillSecondary 相当)、オンはアクセント色のトラックに --on-accent のつまみ。
   WinUI の動き: ホバーでつまみが 16px に、押すと 18px に横に伸び (オンのときは左へ)、トグルで 200ms の減速カーブ (0,0,0,1) で横移動。
   つまみの幅が変わっても右端が揃うよう、オンの位置は translate(calc(30px - 100%)) = 左 5px + 30px − 自身の幅 (右端はいつも 35px)。縦は top 50% + translateY(-50%) で中央 */
.tl-modal-overlay--fluent .tl-switch { width: 40px; height: 24px; background: var(--fl-switch-bg, #f5f5f5); box-shadow: inset 0 0 0 1px var(--fl-switch-stroke, rgba(0, 0, 0, .45)); transition: background .1s; }
.tl-modal-overlay--fluent .tl-switch:hover { background: color-mix(in srgb, var(--fl-switch-bg, #f5f5f5) 95%, var(--f-text)); }
.tl-modal-overlay--fluent .tl-switch:active { background: color-mix(in srgb, var(--fl-switch-bg, #f5f5f5) 91%, var(--f-text)); }
.tl-modal-overlay--fluent .tl-switch::after { top: 50%; left: 5px; width: 14px; height: 14px; background: var(--fl-switch-knob, #5d5d5d); box-shadow: none; transform: translate(0, -50%); transition: transform .2s cubic-bezier(0, 0, 0, 1), width .1s cubic-bezier(0, 0, 0, 1), height .1s cubic-bezier(0, 0, 0, 1); }
.tl-modal-overlay--fluent .tl-switch:hover::after { width: 16px; height: 16px; }
.tl-modal-overlay--fluent .tl-switch:active::after { width: 18px; height: 16px; }
.tl-modal-overlay--fluent .tl-switch:checked { background: var(--tl-accent); box-shadow: inset 0 0 0 1px var(--tl-accent); }
.tl-modal-overlay--fluent .tl-switch:checked:hover { background: color-mix(in srgb, var(--tl-accent) 90%, var(--f-bg, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tl-accent) 90%, var(--f-bg, #fff)); }
.tl-modal-overlay--fluent .tl-switch:checked:active { background: color-mix(in srgb, var(--tl-accent) 80%, var(--f-bg, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tl-accent) 80%, var(--f-bg, #fff)); }
.tl-modal-overlay--fluent .tl-switch:checked::after { background: var(--on-accent, #fff); transform: translate(calc(30px - 100%), -50%); }
.tl-modal-overlay--fluent .tl-switch:indeterminate { box-shadow: none; }
.tl-modal-overlay--fluent .tl-switch:indeterminate::after { background: var(--on-accent, #fff); transform: translate(calc(15px - 50%), -50%); }
.tl-modal-overlay--fluent .tl-switch.is-small { width: 32px; height: 20px; }
.tl-modal-overlay--fluent .tl-switch.is-small::after { left: 4px; width: 12px; height: 12px; }
.tl-modal-overlay--fluent .tl-switch.is-small:hover::after { width: 14px; height: 14px; }
.tl-modal-overlay--fluent .tl-switch.is-small:active::after { width: 16px; height: 14px; }
.tl-modal-overlay--fluent .tl-switch.is-small:checked::after { transform: translate(calc(24px - 100%), -50%); }
.tl-modal-overlay--fluent .tl-switch.is-small:indeterminate::after { transform: translate(calc(12px - 50%), -50%); }
@media (prefers-reduced-motion: reduce) { .tl-modal-overlay--fluent .tl-switch, .tl-modal-overlay--fluent .tl-switch::after { transition: none; } }
.tl-modal-overlay--fluent .tl-switch.is-small:indeterminate::after { transform: translateX(8px); }
.tl-modal-overlay--fluent .tl-miq-btn, .tl-modal-overlay--fluent .tl-engage-refresh, .tl-modal-overlay--fluent .tl-select { border-radius: 4px; border-color: var(--fl-stroke, color-mix(in srgb, var(--f-text) 8%, transparent)); border-bottom-color: color-mix(in srgb, var(--f-text) 20%, transparent); background: var(--fl-control, color-mix(in srgb, var(--f-surface) 70%, transparent)); color: var(--f-text); }
.tl-modal-overlay--fluent .tl-miq-btn:hover, .tl-modal-overlay--fluent .tl-engage-refresh:hover { background: var(--fl-control-hover, color-mix(in srgb, var(--f-text) 4%, transparent)); border-color: var(--fl-stroke, color-mix(in srgb, var(--f-text) 8%, transparent)); border-bottom-color: color-mix(in srgb, var(--f-text) 20%, transparent); }
.tl-modal-overlay--fluent .tl-miq-split, .tl-modal-overlay--fluent .tl-miq-image, .tl-modal-overlay--fluent .tl-set-all, .tl-modal-overlay--fluent .tl-lang, .tl-modal-overlay--fluent .tl-engage-error { border-radius: 4px; }
.tl-modal-overlay--fluent .tl-miq-acc-avatar { border-radius: 4px; }
.tl-modal-overlay--fluent .tl-section-label { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--f-text); }
/* 最大化・最小化 */
.tl-modal-overlay--fluent.is-maximized { padding: 0; }
.tl-modal-overlay--fluent.is-maximized .tl-modal { width: 100%; max-width: none; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; animation: none; }
.tl-modal-overlay--fluent.is-maximized .tl-modal-close { border-top-right-radius: 0; }
.tl-modal-overlay--fluent.is-minimized { padding: 0; align-items: flex-end; justify-content: flex-start; background: transparent; pointer-events: none; animation: none; }
.tl-modal-overlay--fluent.is-minimized .tl-modal { pointer-events: auto; width: 260px; max-width: calc(100vw - 24px); height: auto; max-height: none; margin: 0 0 calc(var(--tl-modal-floor, 0px) + 12px) 12px; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,.14); animation: none; cursor: default; }
.tl-modal-overlay--fluent.is-minimized .tl-modal-body { display: none; }
/* Windows 10: 角丸なし、枠線は 1px、閉じるのホバーは #e81123 */
.tl-modal-overlay--v10 .tl-modal, .tl-modal-overlay--v10.is-minimized .tl-modal { border-radius: 0; border-color: color-mix(in srgb, var(--f-text) 30%, transparent); box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.tl-modal-overlay--v10 .tl-modal-close, .tl-modal-overlay--v8 .tl-modal-close { border-top-right-radius: 0; }
.tl-modal-overlay--v10 .tl-modal-close:hover { background: #e81123; }
.tl-modal-overlay--v10 .tl-modal-head, .tl-modal-overlay--v10 .tl-modal-title { font-family: "Segoe UI", "Yu Gothic UI", var(--f-font), sans-serif; }
/* Windows 8: 角丸なし、太めのアクセント色の枠、見出しは中央、閉じるは常に赤 */
.tl-modal-overlay--v8 .tl-modal, .tl-modal-overlay--v8.is-minimized .tl-modal { border-radius: 0; border: 1px solid var(--tl-accent); box-shadow: 0 0 0 7px color-mix(in srgb, var(--tl-accent) 85%, #fff), 0 16px 40px rgba(0,0,0,.3); }
.tl-modal-overlay--v8.is-maximized .tl-modal { box-shadow: none; }
.tl-modal-overlay--v8 .tl-modal-head { position: relative; justify-content: center; padding: 0 12px; }
.tl-modal-overlay--v8 .tl-modal-title { flex: 0 1 auto; justify-content: center; font-size: 13px; }
.tl-modal-overlay--v8 .tl-modal-title .tl-icon { display: none; }
.tl-modal-overlay--v8 .tl-modal-caption { position: absolute; top: 0; right: 0; height: 32px; margin: 0; }
.tl-modal-overlay--v8 .tl-modal-close, .tl-modal-overlay--v8 .tl-modal-close:hover { background: #c75050; color: #fff; }
.tl-modal-overlay--v8 .tl-modal-close:hover { background: #e04343; }
.tl-modal-overlay--v8 .tl-modal-caption-btn:not(.tl-modal-close):hover { background: rgba(0,0,0,.1); }
.tl-modal-overlay--v8 .tl-switch, .tl-modal-overlay--v8 .tl-miq-btn, .tl-modal-overlay--v8 .tl-engage-refresh, .tl-modal-overlay--v8 .tl-select, .tl-modal-overlay--v8 .tl-miq-split, .tl-modal-overlay--v8 .tl-miq-image, .tl-modal-overlay--v8 .tl-set-all, .tl-modal-overlay--v8 .tl-lang { border-radius: 0; }
/* Windows 7: Aero。ガラスの枠（6px の角丸、ぼかし、黒い細い縁と白い内側の線）、見出しは中央で白い光彩、操作ボタンは右上に密着した光沢のボタン（閉じるは赤く幅広）、
   中身は枠の内側の白い面 */
.tl-modal-overlay--v7 .tl-modal, .tl-modal-overlay--v7.is-minimized .tl-modal { border-radius: 6px; border: 1px solid rgba(0,0,0,.55); background: color-mix(in srgb, var(--tl-accent) 28%, rgba(255,255,255,.55)); color: #000; -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 12px 32px rgba(0,0,0,.45); }
.tl-modal-overlay--v7 .tl-modal-head { position: relative; height: 30px; min-height: 30px; justify-content: center; padding: 0 12px; }
.tl-modal-overlay--v7 .tl-modal-title { flex: 0 1 auto; justify-content: center; font-family: "Segoe UI", "Meiryo UI", Meiryo, var(--f-font), sans-serif; font-size: 12px; line-height: 30px; color: #000; text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 4px #fff; }
.tl-modal-overlay--v7 .tl-modal-title .tl-icon { color: #000; }
.tl-modal-overlay--v7 .tl-modal-caption { position: absolute; top: -1px; right: 6px; height: 20px; margin: 0; border-radius: 0 0 5px 5px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.6); }
.tl-modal-overlay--v7 .tl-modal-caption-btn { width: 26px; height: 20px; border-radius: 0; background: linear-gradient(#f6f8fb, #dbe3ee 45%, #c5d2e4 50%, #e6edf6); color: #000; }
.tl-modal-overlay--v7 .tl-modal-caption-btn + .tl-modal-caption-btn { box-shadow: inset 1px 0 0 rgba(0,0,0,.35); }
.tl-modal-overlay--v7 .tl-modal-caption-btn:hover { background: linear-gradient(#fbfdff, #cfe3fb 45%, #a9cdf7 50%, #d5e8fc); color: #000; }
.tl-modal-overlay--v7 .tl-modal-caption-btn .tl-cap { filter: drop-shadow(0 1px 0 rgba(255,255,255,.7)); }
.tl-modal-overlay--v7 .tl-modal-close, .tl-modal-overlay--v7 .tl-modal-close:active { width: 48px; background: linear-gradient(#f1b4b0, #d36b65 45%, #c1332b 50%, #d9544e); color: #fff; }
.tl-modal-overlay--v7 .tl-modal-close:hover { background: linear-gradient(#f9c7c3, #e07f79 45%, #d5423a 50%, #ea6a63); color: #fff; }
.tl-modal-overlay--v7 .tl-modal-close .tl-cap { filter: drop-shadow(0 1px 0 rgba(0,0,0,.5)); }
.tl-modal-overlay--v7 .tl-modal-body { margin: 0 8px 8px; padding: 12px 16px 16px; border: 1px solid rgba(0,0,0,.35); background: var(--f-surface); color: var(--f-text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.tl-modal-overlay--v7.is-maximized .tl-modal { border-radius: 0; }
.tl-modal-overlay--v7.is-minimized .tl-modal-head { height: 30px; }
.tl-modal-overlay--v7 .tl-miq-btn, .tl-modal-overlay--v7 .tl-engage-refresh, .tl-modal-overlay--v7 .tl-select { border-radius: 3px; background: linear-gradient(#f2f2f2, #ebebeb 50%, #dddddd 50%, #cfcfcf); border-color: #707070; color: #000; }
.tl-modal-overlay--v7 .tl-switch, .tl-modal-overlay--v7 .tl-miq-split, .tl-modal-overlay--v7 .tl-miq-image, .tl-modal-overlay--v7 .tl-set-all, .tl-modal-overlay--v7 .tl-lang { border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .tl-modal-overlay, .tl-modal-overlay .tl-modal { animation: none !important; } }

/* ===== 確認のダイアログ（timeline.js の confirmDialog。… メニューの「削除」など取り消せない操作の前）=====
   modal() の箱（.tl-modal）を小さく使う。--alert の修飾子でテーマの「狭い画面では全画面・シート」の指定を打ち消し、どの幅でも中央の小さな箱にする。
   既定: 角丸の箱とピルのボタン。material: Material 3 の基本ダイアログ（角 28px・見出し 24px・文字のボタンを右に）。
   liquidglass: iOS のアラート（すりガラス・中央ぞろえ・カプセルのボタンを横に・削除は赤い文字）。fluent: WinUI の ContentDialog（下の帯に主ボタンを左、閉じるボタンを右に同じ幅で）。
   取り消せない実行（danger）は赤（--tl-danger） */
.tl-menu-item.is-danger, .tl-menu-item.is-danger .tl-menu-icon { color: var(--tl-danger, #e5484d); }
.tl-menu-item.is-danger:hover, .tl-menu-item.is-danger:focus-visible { background: color-mix(in srgb, var(--tl-danger, #e5484d) 10%, transparent); }
@keyframes tl-alert-pop { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
.tl-modal-overlay--alert { padding: 24px; align-items: center; justify-content: center; }
.tl-modal-overlay--alert .tl-alert { width: 100%; max-width: 380px; height: auto; max-height: calc(100% - 48px); overflow-y: auto; border-radius: 18px; animation: tl-dialog-in .2s cubic-bezier(.05,.7,.1,1) both; }
.tl-modal-overlay--alert.is-closing .tl-alert { animation: tl-dialog-out .15s ease-in both; }
.tl-alert-body { padding: 22px 22px 6px; }
.tl-alert-title { font-size: 17px; font-weight: 700; line-height: 1.4; }
.tl-alert-message { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--f-muted); }
.tl-alert-error { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--tl-danger, #e5484d); }
.tl-alert-error[hidden] { display: none; }
.tl-alert-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 18px 18px; }
.tl-alert-btn { min-height: 36px; padding: 0 16px; border: 1px solid var(--f-border); border-radius: 999px; background: none; color: var(--f-text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.tl-alert-btn.tl-alert-ok { border-color: var(--tl-accent); background: var(--tl-accent); color: #fff; }
.tl-alert-btn.tl-alert-ok.is-danger { border-color: var(--tl-danger, #e5484d); background: var(--tl-danger, #e5484d); }
.tl-alert-btn:disabled { opacity: .55; cursor: default; }
.tl-alert-btn:focus-visible { outline: 2px solid var(--tl-accent); outline-offset: 2px; }
/* material */
.tl-modal-overlay--alert.tl-modal-overlay--material { padding: 24px; align-items: center; }
.tl-modal-overlay--alert.tl-modal-overlay--material .tl-alert { width: auto; min-width: min(280px, 100%); max-width: 560px; height: auto; max-height: calc(100% - 48px); border-radius: 28px; background: var(--md-surface-container-high, var(--f-surface)); box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15); animation: tl-dialog-in .25s cubic-bezier(.05,.7,.1,1) both; }
.tl-modal-overlay--alert.tl-modal-overlay--material.is-closing .tl-alert { animation: tl-dialog-out .15s cubic-bezier(.3,0,.8,.15) both; }
.tl-modal-overlay--material .tl-alert-body { padding: 24px 24px 0; }
.tl-modal-overlay--material .tl-alert-title { font-size: 24px; font-weight: 400; line-height: 32px; color: var(--md-on-surface, var(--f-text)); }
.tl-modal-overlay--material .tl-alert-message { margin-top: 16px; font-size: 14px; line-height: 20px; letter-spacing: .25px; color: var(--md-on-surface-variant, var(--f-muted)); }
.tl-modal-overlay--material .tl-alert-actions { gap: 8px; padding: 24px; }
.tl-modal-overlay--material .tl-alert-btn, .tl-modal-overlay--material .tl-alert-btn.tl-alert-ok { min-height: 40px; padding: 0 12px; border: 0; border-radius: 20px; background: none; color: var(--tl-accent); font-size: 14px; font-weight: 500; letter-spacing: .1px; }
.tl-modal-overlay--material .tl-alert-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--tl-accent) 8%, transparent); }
.tl-modal-overlay--material .tl-alert-btn.tl-alert-ok.is-danger { color: var(--md-error, #b3261e); }
.tl-modal-overlay--material .tl-alert-btn.tl-alert-ok.is-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--md-error, #b3261e) 8%, transparent); }
/* liquidglass */
.tl-modal-overlay--alert.tl-modal-overlay--liquidglass { padding: 24px; align-items: center; }
.tl-modal-overlay--alert.tl-modal-overlay--liquidglass .tl-alert { width: 100%; max-width: 300px; height: auto; max-height: calc(100% - 48px); border: 1px solid var(--lg-edge, rgba(255, 255, 255, .5)); border-radius: 32px; background: color-mix(in srgb, var(--f-surface) 82%, transparent); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); text-align: center; animation: tl-alert-pop .3s cubic-bezier(.32,.72,0,1) both; }
.tl-modal-overlay--alert.tl-modal-overlay--liquidglass.is-closing .tl-alert { animation: tl-dialog-out .2s ease-in both; }
.tl-modal-overlay--liquidglass .tl-alert-body { padding: 22px 22px 4px; }
.tl-modal-overlay--liquidglass .tl-alert-title { font-size: 17px; font-weight: 600; letter-spacing: -.4px; }
.tl-modal-overlay--liquidglass .tl-alert-message { margin-top: 6px; font-size: 14px; line-height: 1.45; letter-spacing: -.1px; color: color-mix(in srgb, var(--f-text) 70%, transparent); }
.tl-modal-overlay--liquidglass .tl-alert-actions { gap: 10px; padding: 16px; }
.tl-modal-overlay--liquidglass .tl-alert-btn { flex: 1; min-height: 48px; padding: 0 12px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--f-text) 9%, transparent); color: var(--f-text); font-size: 17px; font-weight: 600; letter-spacing: -.4px; }
.tl-modal-overlay--liquidglass .tl-alert-btn.tl-alert-ok { background: var(--tl-accent); color: #fff; }
.tl-modal-overlay--liquidglass .tl-alert-btn.tl-alert-ok.is-danger { background: color-mix(in srgb, var(--f-text) 9%, transparent); color: #ff3b30; }
/* fluent */
.tl-modal-overlay--alert.tl-modal-overlay--fluent { padding: 24px; align-items: center; }
.tl-modal-overlay--alert.tl-modal-overlay--fluent .tl-alert { width: 100%; max-width: 448px; height: auto; max-height: calc(100% - 48px); border-radius: 8px; animation: tl-window-in .2s cubic-bezier(0,0,0,1) both; }
.tl-modal-overlay--alert.tl-modal-overlay--fluent.is-closing .tl-alert { animation: tl-modal-fade-out .15s ease-out both; }
.tl-modal-overlay--fluent .tl-alert-body { padding: 24px; }
.tl-modal-overlay--fluent .tl-alert-title { font-size: 20px; font-weight: 600; line-height: 28px; }
.tl-modal-overlay--fluent .tl-alert-message { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--f-text); }
.tl-modal-overlay--fluent .tl-alert-actions { gap: 8px; padding: 24px; border-top: 1px solid color-mix(in srgb, var(--f-text) 8%, transparent); background: color-mix(in srgb, var(--f-text) 3%, var(--f-surface)); }
.tl-modal-overlay--fluent .tl-alert-btn { flex: 1; min-height: 32px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--f-text) 10%, transparent); border-bottom-color: color-mix(in srgb, var(--f-text) 18%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--f-surface) 70%, #fff); color: var(--f-text); font-size: 14px; font-weight: 400; }
.tl-modal-overlay--fluent .tl-alert-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--f-text) 4%, var(--f-surface)); }
.tl-modal-overlay--fluent .tl-alert-btn.tl-alert-ok { order: -1; border-color: transparent; background: var(--tl-accent); color: #fff; }
.tl-modal-overlay--fluent .tl-alert-btn.tl-alert-ok.is-danger { background: #c42b1c; }
.tl-modal-overlay--fluent .tl-alert-btn.tl-alert-ok:hover:not(:disabled) { background: color-mix(in srgb, var(--tl-accent) 90%, #000); }
.tl-modal-overlay--fluent .tl-alert-btn.tl-alert-ok.is-danger:hover:not(:disabled) { background: color-mix(in srgb, #c42b1c 90%, #000); }


/* ===== 画像の全画面表示（timeline.js の openLightbox。つぶやきの画像のタップ。動画はまだ対象外）=====
   黒い背景に画像を納め（contain）、上に ✕ と「n / N」、左右に前後のボタン（広い画面だけ）、下に ALT の本文。
   .is-bare は画像のタップで操作部を隠した状態、.is-zoomed は拡大中（ドラッグで動かせる）、--tl-lightbox-dim は下スワイプで背景を薄くする割合。
   見た目はテーマごと: material = 左上に ✕ の全画面（Google フォト風）、liquidglass = 右上に丸いガラスの ✕（iOS の写真）、fluent = 32px のタイトルバーに Windows の閉じるボタン（フォト アプリ） */
.tl-lightbox { --tl-lightbox-dim: 1; position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; background: rgba(0,0,0, calc(.94 * var(--tl-lightbox-dim))); color: #fff; font-family: var(--f-font); text-align: left; touch-action: none; overscroll-behavior: contain; user-select: none; -webkit-user-select: none; animation: tl-lightbox-in .2s ease; }
.tl-lightbox.is-opening { animation: none; }
.tl-lightbox.is-closing { animation: tl-lightbox-out .25s ease forwards; pointer-events: none; }
@keyframes tl-lightbox-in { from { background-color: rgba(0,0,0,0); } }
@keyframes tl-lightbox-out { to { background-color: rgba(0,0,0,0); } }
.tl-lightbox-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-in; }
.tl-lightbox.is-zoomed .tl-lightbox-stage { cursor: grab; }
.tl-lightbox-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; will-change: transform; -webkit-user-drag: none; cursor: zoom-in; }
.tl-lightbox.is-zoomed .tl-lightbox-img { cursor: grab; }
.tl-lightbox-img.is-switching { animation: tl-lightbox-switch .18s ease; }
@keyframes tl-lightbox-switch { from { opacity: 0; } }
.tl-lightbox-bar, .tl-lightbox-nav, .tl-lightbox-alt { position: absolute; z-index: 1; transition: opacity .2s ease, visibility .2s; }
.tl-lightbox.is-bare .tl-lightbox-bar, .tl-lightbox.is-bare .tl-lightbox-nav, .tl-lightbox.is-bare .tl-lightbox-alt, .tl-lightbox.is-zoomed .tl-lightbox-nav { opacity: 0; visibility: hidden; }
.tl-lightbox-bar { top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); }
.tl-lightbox-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; font-size: 22px; cursor: pointer; }
.tl-lightbox-close:hover { background: rgba(255,255,255,.16); }
.tl-lightbox-counter { font-size: 14px; font-weight: 600; opacity: .9; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.tl-lightbox-nav { top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 24px; cursor: pointer; transform: translateY(-50%); }
.tl-lightbox-nav.is-prev { left: 12px; }
.tl-lightbox-nav.is-next { right: 12px; }
.tl-lightbox-nav.is-prev .tl-ic { transform: rotate(180deg); }
.tl-lightbox-nav:hover { background: rgba(255,255,255,.2); }
.tl-lightbox-nav:disabled { opacity: 0; visibility: hidden; }
.tl-lightbox-alt { left: 0; right: 0; bottom: 0; max-height: 40%; overflow: auto; padding: 24px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.7) 30%); font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.tl-lightbox-alt[hidden] { display: none; }
@media (hover: none) and (pointer: coarse) { .tl-lightbox-nav { display: none; } }   /* タッチはスワイプで行き来する */
.tl-media img.tl-media-photo { cursor: zoom-in; }
/* material: 左上に ✕、「n / N」はその右（Google フォト風） */
.tl-lightbox--material .tl-lightbox-close { width: 48px; height: 48px; }
/* liquidglass: 右上に丸いガラスの ✕（iOS の写真）。数は中央 */
.tl-lightbox--liquidglass .tl-lightbox-bar { flex-direction: row-reverse; justify-content: space-between; padding-right: 14px; padding-left: 14px; }
.tl-lightbox--liquidglass .tl-lightbox-close { width: 34px; height: 34px; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.25); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); }
.tl-lightbox--liquidglass .tl-lightbox-close .tl-ic { width: 16px; height: 16px; stroke-width: 2.5; }
.tl-lightbox--liquidglass .tl-lightbox-close:hover { background: rgba(255,255,255,.3); }
.tl-lightbox--liquidglass .tl-lightbox-counter { flex: 1; text-align: center; font-size: 15px; }
.tl-lightbox--liquidglass .tl-lightbox-nav { -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); background: rgba(255,255,255,.18); }
/* fluent: Windows のタイトルバー（32px。右端に 46×32 の閉じる。10 は赤いホバー）。数は左 */
.tl-lightbox--fluent .tl-lightbox-stage { top: 32px; }   /* フォト アプリと同じく、画像はタイトルバーの下 */
.tl-lightbox--fluent .tl-lightbox-bar { flex-direction: row-reverse; justify-content: space-between; height: 32px; padding: 0 0 0 12px; background: rgba(0,0,0,.6); }
.tl-lightbox--fluent .tl-lightbox-close { width: 46px; height: 32px; border-radius: 0; font-size: 10px; cursor: default; }
.tl-lightbox--fluent .tl-lightbox-close .tl-cap { width: 10px; height: 10px; }
.tl-lightbox--fluent .tl-lightbox-close:hover { background: #c42b1c; }
.tl-lightbox--fluent .tl-lightbox-counter { font-size: 12px; font-weight: 400; }
.tl-lightbox--fluent .tl-lightbox-nav { border-radius: 4px; background: rgba(255,255,255,.1); }
.tl-lightbox--fluent .tl-lightbox-nav:hover { background: rgba(255,255,255,.2); }
.tl-lightbox--v10 .tl-lightbox-close:hover, .tl-lightbox--v8 .tl-lightbox-close:hover { background: #e81123; }
.tl-lightbox--v8 .tl-lightbox-close, .tl-lightbox--v7 .tl-lightbox-close { background: #c42b1c; }
@media (prefers-reduced-motion: reduce) { .tl-lightbox, .tl-lightbox-img { animation: none !important; transition: none !important; } }

/* ===== 翻訳パネル（timeline.js の openTranslatePanel。Google 翻訳の結果画面風）=====
   上に履歴・★・… の丸いボタン。原文のブロック（言語の小見出し・大きな本文・読み上げとコピー）、髪線、訳のブロック（強調色。評価と … も）。
   履歴は ★ 付きを先頭に、原文と訳文の 2 行と言語・時刻 */
.tl-ic-google { object-fit: contain; vertical-align: -.15em; }   /* Google 翻訳のロゴ（画像。timeline.js の ICON.google）。Azure は公式の SVG（ICON.azure） */
.tl-tr-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.tl-tr-open:hover { color: var(--f-text); }
.tl-modal--translate { --tl-modal-w: 640px; }
.tl-tp { display: flex; flex-direction: column; gap: 4px; }
.tl-tp-head { display: flex; justify-content: flex-end; gap: 4px; margin: 2px -6px 6px 0; }
.tl-tp-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--f-muted); font-size: 22px; cursor: pointer; }
.tl-tp-btn:hover { background: color-mix(in srgb, var(--f-text) 8%, transparent); color: var(--f-text); }
.tl-tp-btn.is-active { color: var(--tl-accent); }
.tl-tp-btn[hidden] { display: none; }
.tl-tp-block { display: flex; flex-direction: column; gap: 14px; padding: 8px 0 10px; }
.tl-tp-lang { font-size: 14px; font-weight: 500; color: var(--f-muted); }
.tl-tp-text { margin: 0; font-size: 28px; line-height: 1.4; font-weight: 400; overflow-wrap: anywhere; white-space: pre-wrap; }
.tl-tp-text a { color: inherit; }
.tl-tp-block.is-target .tl-tp-lang, .tl-tp-block.is-target .tl-tp-text { color: var(--tl-accent); }
.tl-tp-actions { display: flex; align-items: center; gap: 4px; margin: 0 -8px; }
.tl-tp-spacer { flex: 1; }
.tl-tp-rule { width: 70%; margin: 6px auto; border: 0; border-top: 1px solid color-mix(in srgb, var(--tl-accent) 30%, var(--f-border)); }
/* 原文の埋め込み（引用カードの見た目。本文は投稿と同じ大きさ、画像は「n 枚の添付画像」の文字だけ、下に投稿の日時） */
.tl-tp-embed { margin: 4px 0 0; }
.tl-tp-embed .tl-quote-text { font-size: 16px; line-height: 1.6; }
.tl-tp-media-note { margin-top: 8px; font-size: 13px; color: var(--f-muted); }
.tl-tp-embed-time { margin-top: 6px; font-size: 12px; color: var(--f-muted); white-space: pre-line; }
.tl-tp-targets { display: flex; flex-direction: column; gap: 4px; }   /* エンジンごとの訳のブロック（保存してある訳、もう一方のエンジンの訳） */
.tl-tp-targets .tl-tp-rule { width: 40%; }
.tl-tp-wait { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--f-muted); }
.tl-tp-wait .tl-tr-spin { display: inline-flex; }
.tl-tp-error { color: var(--f-muted); }
.tl-tp-same { font-size: 16px; color: var(--f-muted); }
.tl-tp-use { padding: 6px 14px; border: 1px solid color-mix(in srgb, var(--tl-accent) 40%, transparent); border-radius: 999px; background: none; color: var(--tl-accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tl-tp-use:hover { background: color-mix(in srgb, var(--tl-accent) 10%, transparent); }
.tl-tp-use:disabled { opacity: .7; cursor: default; }
.tl-tp-row { display: grid; grid-template-columns: 24px 1fr; gap: 2px 10px; width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--f-border); background: none; color: var(--f-text); font: inherit; text-align: left; cursor: pointer; }
.tl-tp-row:hover { background: color-mix(in srgb, var(--f-text) 5%, transparent); }
.tl-tp-row-star { grid-row: 1 / span 2; display: inline-flex; align-items: flex-start; padding-top: 2px; color: var(--f-muted); font-size: 18px; }
.tl-tp-row-star.is-on { color: var(--tl-accent); }
.tl-tp-row-texts { min-width: 0; }
.tl-tp-row-src, .tl-tp-row-dst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-tp-row-src { font-size: 15px; }
.tl-tp-row-dst { font-size: 15px; color: var(--tl-accent); }
.tl-tp-row-meta { grid-column: 2; font-size: 12px; color: var(--f-muted); }
@media (min-width: 769px) { .tl-tp-text { font-size: 24px; } }

/* ===== 見出しの「フィルター」（高度な絞り込み。timeline.js の openFilter）===== */
.tl-filter-btn { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--f-border); border-radius: 999px; background: none; color: var(--f-muted); font: inherit; font-size: 12px; cursor: pointer; }
.tl-filter-btn .tl-icon { display: inline-flex; font-size: 14px; }
.tl-filter-btn:hover { color: var(--f-text); }
.tl-filter-btn.is-active { background: color-mix(in srgb, var(--tl-accent) 16%, var(--f-card)); color: var(--tl-accent); border-color: transparent; font-weight: 700; }
.tl-filter-count:empty { display: none; }
.tl-filter-count { min-width: 16px; padding: 0 4px; border-radius: 999px; background: var(--tl-accent); color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.tl-filter { display: flex; flex-direction: column; gap: 6px; }
.tl-filter-sub { font-weight: 400; color: var(--f-muted); }
.tl-filter-sort, .tl-filter-invert { margin: 0 0 6px; padding: 10px 12px; border: 1px solid var(--f-border); border-radius: 12px; }   /* いちばん上の並び順と反転トグル */
.tl-filter-sort { margin-bottom: 0; }
.tl-filter-chips { margin-bottom: 4px; }
.tl-filter-ff { flex-direction: column; align-items: stretch; }
.tl-filter-tags { flex-direction: column; align-items: stretch; }
.tl-filter-tag-list { margin: 0; max-height: 36vh; overflow-y: auto; }
.tl-filter-q { margin-bottom: 6px; }
.tl-filter-search { width: 100%; padding: 8px 12px; border: 1px solid var(--f-border); border-radius: 10px; background: var(--f-surface); color: var(--f-text); font: inherit; font-size: 14px; }
.tl-filter-ff-list { margin: 0; max-height: 40vh; overflow-y: auto; }
.tl-filter-ff-list.is-loading { opacity: .5; pointer-events: none; }   /* 「アーカイブ済みポストを含めない」の切り替えで候補を取り直している間 */
.tl-filter-more { display: inline-flex; align-items: center; padding: 6px 14px; border: 1px dashed var(--f-border); border-radius: 999px; background: none; color: var(--tl-link); font: inherit; font-size: 13px; cursor: pointer; }   /* 相互フォローの候補の「ほか N 人を表示」 */
.tl-filter-more:hover { background: color-mix(in srgb, var(--f-text) 5%, transparent); }
.tl-filter-reset { align-self: flex-start; margin-top: 8px; padding: 8px 16px; border: 1px solid var(--f-border); border-radius: 999px; background: none; color: var(--f-text); font: inherit; font-size: 13px; cursor: pointer; }
.tl-filter-reset:disabled { opacity: .5; cursor: default; }