/*
 * お気に入り（ウォッチリスト）の見た目。2026-09-11 新規。
 *
 * 面と文字はどちらもテーマトークンから取る。片方だけ固定色にすると、
 * ダークで「白地に白文字」や「箱と同色の文字」になる（過去に2回起きている）。
 * 一般的すぎるクラス名（.star / .fav）は使わない。既存の指定と衝突する。
 */

/* ---- 星そのもの ---------------------------------------------------- */
.kbf-fav-star {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 26px; height: 26px; padding: 0;
  border: 0; background: transparent;
  color: var(--kb-text-muted, #94a3b8);
  border-radius: var(--kb-radius-sm, 6px);
  cursor: pointer; line-height: 1;
  transition: color .12s ease, background .12s ease, transform .12s ease;
}
.kbf-fav-star svg { width: 17px; height: 17px; display: block; pointer-events: none; }
.kbf-fav-star:hover { color: #f59e0b; background: rgba(245, 158, 11, .12); }
.kbf-fav-star:active { transform: scale(.88); }
.kbf-fav-star[aria-pressed="true"] { color: #f59e0b; }
.kbf-fav-star[aria-pressed="true"] svg { fill: currentColor; }
.kbf-fav-star[aria-pressed="false"] svg { fill: none; }
.kbf-fav-star[disabled] { opacity: .45; cursor: default; }
/* 一覧の行に混ぜるときは詰める。表の行高を増やさない大きさにしてある。 */
.kbf-fav-star.kbf-fav-star--sm { width: 22px; height: 22px; }
.kbf-fav-star.kbf-fav-star--sm svg { width: 14px; height: 14px; }

/* 触る的を確保する。表示上の大きさは変えずに当たり判定だけ広げる。 */
@media (pointer: coarse) {
  .kbf-fav-star::after {
    content: ""; position: absolute;
    width: 40px; height: 40px; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
  .kbf-fav-star { position: relative; }
}

/* ---- トップバーの「お気に入り」と、いま見ている銘柄の星 -------------- */
.topbar-fav {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.kbf-fav-topstar {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 2px; padding: 3px 9px 3px 5px;
  border: 1px solid var(--kb-border, #dbe3ed);
  border-radius: 99px;
  background: var(--kb-surface, #fff);
  color: var(--kb-text-muted, #64748b);
  font: 700 .72rem/1.2 inherit;
  cursor: pointer; white-space: nowrap;
}
.kbf-fav-topstar:hover { color: var(--kb-text, #0f172a); border-color: var(--kb-border-strong, #cbd5e1); }
.kbf-fav-topstar[aria-pressed="true"] { color: #b45309; border-color: #f59e0b; background: rgba(245, 158, 11, .10); }
/* aria-pressed が付くのはボタン側。星は入れ子の <span> なので、塗り分けは
   親から辿る。span 側に付けた式は一致せず、押しても塗りが変わらない。 */
.kbf-fav-topstar .kbf-fav-star { width: 20px; height: 20px; color: inherit; }
.kbf-fav-topstar .kbf-fav-star svg { width: 15px; height: 15px; }
.kbf-fav-topstar[aria-pressed="true"] .kbf-fav-star { color: #f59e0b; }
.kbf-fav-topstar[aria-pressed="true"] .kbf-fav-star svg { fill: currentColor; }
.kbf-fav-topstar[aria-pressed="false"] .kbf-fav-star svg { fill: none; }
.kbf-fav-topstar .kbf-fav-star:hover { background: transparent; }
.kbf-fav-topstar-label { pointer-events: none; }
@media (max-width: 860px) {
  .kbf-fav-topstar-label { display: none; }
  .kbf-fav-topstar { padding: 3px 5px; }
}
/* 狭い画面では枠と余白を落として、トップバーの gap ぶんを負のマージンで戻す。
   実測（2026-09-11）: これが無いと幅360pxでトップバーが 6px、320px で 42px
   余分にはみ出す。はみ出すのは星そのものではなく .topbar の gap:20px が
   1つぶん増えるため。押せる大きさ（28px）は ::after の当たり判定で保つ。 */
@media (max-width: 560px) {
  .kbf-fav-topstar {
    padding: 0; border-color: transparent; background: transparent;
    margin-left: -13px; margin-right: -13px;
  }
  .kbf-fav-topstar[aria-pressed="true"] { background: transparent; border-color: transparent; }
  .kbf-fav-topstar .kbf-fav-star { width: 26px; height: 26px; }
  .kbf-fav-topstar .kbf-fav-star svg { width: 18px; height: 18px; }
}

/* 見出しの横に差し込む星。h1 の行送りを変えないよう vertical-align で置く。 */
.kbf-fav-h1star { margin-left: 8px; vertical-align: middle; }

/* ---- 一覧の行に差し込んだ星 ---------------------------------------- */
.tk-row .kbf-fav-star { margin-right: 2px; }
.kbf-fav-cell { display: inline-flex; align-items: center; gap: 2px; }

/* ---- 押したときの小さな知らせ --------------------------------------- */
.kbf-fav-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px);
  z-index: 4000; max-width: min(92vw, 460px);
  padding: 10px 16px; border-radius: 999px;
  background: rgba(15, 23, 42, .94); color: #f8fafc;
  font: 600 .8rem/1.4 inherit; text-align: center;
  box-shadow: 0 6px 24px rgba(15, 23, 42, .28);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.kbf-fav-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.kbf-fav-toast a { color: #fbbf24; text-decoration: underline; }

/* ==================================================================== */
/* お気に入りページ (/favorites/)                                        */
/* ==================================================================== */
.fv-wrap { max-width: 1180px; margin: 0 auto; }
.fv-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.fv-head h1 { font-size: var(--kb-fs-h1, 1.4rem); margin: 0; font-weight: 800; letter-spacing: -.01em; }
.fv-count { color: var(--kb-text-muted, #64748b); font-size: .78rem; font-weight: 600; }
.fv-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.fv-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; min-height: 36px;
  border: 1px solid var(--kb-border, #dbe3ed);
  border-radius: var(--kb-radius-md, 8px);
  background: var(--kb-surface, #fff); color: var(--kb-text, #0f172a);
  font: 700 .78rem/1.2 inherit; cursor: pointer; text-decoration: none;
}
.fv-btn:hover { border-color: var(--kb-accent, #2563eb); color: var(--kb-accent, #2563eb); }
.fv-btn--primary { background: var(--kb-accent, #2563eb); border-color: var(--kb-accent, #2563eb); color: #fff; }
.fv-btn--primary:hover { background: var(--kb-accent-hover, #1d4ed8); border-color: var(--kb-accent-hover, #1d4ed8); color: #fff; }
.fv-btn--ghost { background: transparent; }
.fv-btn--danger:hover { border-color: var(--kb-negative, #dc2626); color: var(--kb-negative, #dc2626); }

.fv-notice {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 15px; margin-bottom: 14px;
  border: 1px solid var(--kb-border, #dbe3ed);
  border-left: 3px solid var(--kb-accent, #2563eb);
  border-radius: var(--kb-radius-md, 8px);
  background: var(--kb-surface-raised, #f8fafc);
  color: var(--kb-text, #0f172a);
  font-size: .8rem; line-height: 1.6;
}
.fv-notice--warn { border-left-color: #f59e0b; }

.fv-folder {
  border: 1px solid var(--kb-border, #dbe3ed);
  border-radius: var(--kb-radius-md, 8px);
  background: var(--kb-surface, #fff);
  margin-bottom: 14px; overflow: hidden;
}
.fv-folder-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: var(--kb-surface-raised, #f8fafc);
  border-bottom: 1px solid var(--kb-border, #dbe3ed);
}
.fv-folder-toggle {
  -webkit-appearance: none; appearance: none;
  border: 0; background: transparent; cursor: pointer;
  color: var(--kb-text-muted, #64748b);
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; flex: 0 0 auto;
}
.fv-folder-name { font-weight: 800; font-size: .88rem; color: var(--kb-text, #0f172a); }
.fv-folder-n { color: var(--kb-text-muted, #64748b); font-size: .74rem; font-weight: 600; }
.fv-folder-tools { margin-left: auto; display: flex; gap: 4px; }
.fv-folder-tool {
  -webkit-appearance: none; appearance: none;
  border: 1px solid transparent; background: transparent;
  color: var(--kb-text-muted, #64748b);
  border-radius: var(--kb-radius-sm, 6px);
  min-width: 32px; min-height: 32px; padding: 0 8px;
  font: 600 .72rem/1 inherit; cursor: pointer;
}
.fv-folder-tool:hover { border-color: var(--kb-border, #dbe3ed); color: var(--kb-text, #0f172a); background: var(--kb-surface, #fff); }
.fv-folder.collapsed .fv-folder-body { display: none; }

/* 表（広い画面） */
.fv-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.fv-table th, .fv-table td { padding: 8px 10px; border-bottom: 1px solid var(--kb-border, #e2e8f0); text-align: left; }
.fv-table th {
  font-size: .7rem; font-weight: 700; color: var(--kb-text-muted, #64748b);
  background: var(--kb-surface, #fff); white-space: nowrap;
}
.fv-table td.num, .fv-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fv-table tbody tr:last-child td { border-bottom: 0; }
.fv-table tbody tr:hover { background: var(--kb-surface-raised, #f8fafc); }
.fv-sym { font-weight: 700; color: var(--kb-text, #0f172a); text-decoration: none; }
.fv-sym:hover { color: var(--kb-accent, #2563eb); text-decoration: underline; }
.fv-name { color: var(--kb-text-muted, #64748b); font-size: .76rem; display: block; }
.fv-tag {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: var(--kb-surface-raised, #eef2f7); color: var(--kb-text-muted, #64748b);
  font-size: .66rem; font-weight: 700; white-space: nowrap;
}
.fv-up { color: var(--kb-positive, #059669); font-weight: 700; }
.fv-down { color: var(--kb-negative, #dc2626); font-weight: 700; }
.fv-flat { color: var(--kb-text-muted, #64748b); }
.fv-asof { color: var(--kb-text-muted, #94a3b8); font-size: .68rem; white-space: nowrap; }
.fv-chg-inline { display: none; }   /* 広い画面では「前日比」列が別にある */
.fv-empty { padding: 18px 14px; color: var(--kb-text-muted, #64748b); font-size: .82rem; }
.fv-row-tools { display: flex; gap: 2px; justify-content: flex-end; }
.fv-move {
  -webkit-appearance: none; appearance: none;
  max-width: 140px; min-height: 32px;
  border: 1px solid var(--kb-border, #dbe3ed); border-radius: var(--kb-radius-sm, 6px);
  background: var(--kb-surface, #fff); color: var(--kb-text, #0f172a);
  font: 600 .72rem/1.2 inherit; padding: 4px 6px;
}

/* 狭い画面では表をカードに畳む。横スクロールにしない（行が読めなくなる）。 */
@media (max-width: 720px) {
  .fv-table, .fv-table tbody, .fv-table tr, .fv-table td { display: block; width: 100%; }
  .fv-table thead { display: none; }
  .fv-table tr {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    grid-template-areas: "star main price" "star meta tools";
    gap: 2px 8px;
    align-items: center;
    padding: 9px 11px;
    border-bottom: 1px solid var(--kb-border, #e2e8f0);
  }
  .fv-table td { padding: 0; border: 0; }
  .fv-table td.fv-c-star  { grid-area: star; }
  .fv-table td.fv-c-name  { grid-area: main; min-width: 0; }
  .fv-table td.fv-c-price { grid-area: price; text-align: right; }
  .fv-table td.fv-c-meta  { grid-area: meta; min-width: 0; }
  .fv-table td.fv-c-tools { grid-area: tools; text-align: right; }
  .fv-table td.fv-c-chg   { display: none; }   /* 前日比は price セルへ合流させる */
  .fv-chg-inline { display: inline; margin-left: 6px; }
  .fv-sym { font-size: .86rem; }
  .fv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fv-head h1 { font-size: var(--kb-fs-h1-sm, 1.15rem); }
  .fv-actions { width: 100%; margin-left: 0; }
  .fv-btn { flex: 1 1 auto; justify-content: center; }
}

/* 追加フォーム */
.fv-add {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 11px 13px; margin-bottom: 14px;
  border: 1px dashed var(--kb-border-strong, #cbd5e1);
  border-radius: var(--kb-radius-md, 8px);
  background: var(--kb-surface, #fff);
}
.fv-add select, .fv-add input {
  min-height: 36px; padding: 6px 9px;
  border: 1px solid var(--kb-border, #dbe3ed); border-radius: var(--kb-radius-sm, 6px);
  background: var(--kb-surface, #fff); color: var(--kb-text, #0f172a);
  font: 600 .78rem/1.2 inherit;
}
.fv-add input { flex: 1 1 180px; min-width: 0; }
.fv-add-hint { flex: 1 1 100%; color: var(--kb-text-muted, #64748b); font-size: .72rem; }

/* カード型の一覧（先物トップなど）に差し込んだ星。<a> の中に入るので、
   カードの見出し行の先頭へ並べる。カードの高さは変えない。 */
.kbf-fav-incard { margin-right: 4px; vertical-align: middle; }
.fut-card-name > .kbf-fav-incard { float: none; }