/* links の画面だけの CSS。セレクタは #tab-links の中に限る。色は style.css の :root のトークンだけ。 */
#tab-links .lk-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: var(--stack); }
#tab-links .lk-filter .lbl { font-size: 12px; color: var(--muted); margin-right: 4px; white-space: nowrap; }
#tab-links .lk-filter button { height: 28px; padding: 0 10px; font-family: inherit; font-size: 12px; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
#tab-links .lk-filter button.is-on { color: var(--primary); border-color: var(--primary); background: var(--primary-glow); font-weight: 600; }

#tab-links .card-body.flush { padding: 0 0 8px; }
#tab-links table.t { table-layout: fixed; }
#tab-links table.t td { font-size: 13px; }
#tab-links table.t tr.grp td { background: var(--sunken); font-size: 12px; font-weight: 600; color: var(--muted); padding-top: 8px; padding-bottom: 8px; }
#tab-links table.t tr.grp .gwrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
#tab-links table.t tr.grp .gname { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#tab-links table.t tr.grp .init { color: var(--text); flex: 0 0 auto; }
#tab-links table.t tr.grp .btn-ai { margin-left: auto; height: 24px; min-height: 24px; flex: 0 0 auto; font-family: inherit; }
#tab-links .init { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
#tab-links .dom { font-size: 13px; }
#tab-links a.dom, #tab-links a.mlink { text-decoration: none; }
#tab-links a.dom:hover, #tab-links a.mlink:hover { text-decoration: underline; }
#tab-links .mlink { font-size: 12px; margin-right: 10px; }
#tab-links .lk-dash { color: var(--subtle); }
#tab-links tr.nourl td, #tab-links tr.nourl .dom { color: var(--subtle); }
#tab-links col.c-name { width: 220px; }
#tab-links col.c-init { width: 72px; }
#tab-links col.c-st { width: 136px; }
#tab-links col.c-m { width: 120px; }
#tab-links col.c-auto { width: 168px; }
#tab-links col.c-meas { width: 104px; }
#tab-links col.c-last { width: 140px; }
/* 最後の投稿は日付と件数の2行で出す（1行で「…」にしない） */
#tab-links table.t td.lk-last { white-space: normal; line-height: 1.35; font-size: 12px; }
/* メールアドレスの表は、アドレス・用途・紐付くアカウントを切らずに読ませる（1行で「…」にしない） */
#tab-links table.t.lk-mail td { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; vertical-align: top; }
#tab-links .lk-mob { display: none; }

#tab-links .lk-tools { padding: var(--card-pad-y) var(--card-pad) var(--card-pad); display: grid; gap: 18px; }
#tab-links .lk-tools h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
#tab-links .tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 8px; }
#tab-links .tool { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); min-width: 0; text-decoration: none; }
#tab-links .tool:hover { border-color: var(--primary); background: var(--primary-glow); }
#tab-links .tool b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-links .tool span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#tab-links .lk-warn { margin-top: 12px; font-size: 12px; color: var(--muted); }
#tab-links .lk-warn summary { cursor: pointer; width: max-content; }
#tab-links .lk-warn ul { margin: 6px 0 0 18px; padding: 0; }
#tab-links .lk-warn li { margin: 2px 0; }

@media (max-width: 768px) {
    /* 列は消さずに幅0にする（td を display:none にすると、後ろのセルが前の列の幅へずれる） */
    #tab-links col.hs { width: 0; }
    #tab-links table.t th.hs, #tab-links table.t td.hs { padding-left: 0; padding-right: 0; visibility: hidden; font-size: 0; }
    #tab-links table.t td.hs > * { display: none; }
    #tab-links .gwrap .hs { display: none; }
    #tab-links col.c-name { width: 42%; }
    #tab-links col.c-st { width: 104px; }
    #tab-links .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #tab-links .lk-mob { display: inline; }   /* メールの表は種類の列を隠すので、アドレスの下に出す */
    #tab-links table.lk-mail col.hs { width: 0; }   /* col.c-st の 104px が隠した列にも当たらないように */
    #tab-links table.lk-mail col.c-name { width: 46%; }
}