/* ==========================================================================
   粉丝工具页共享样式（本地候选） · 2026-10-30
   视觉基准：docs/design/HOME_V1_APPROVED.md（暖白编辑式）
   复用 styles.css 的 token 与头部；本文件只含工具页组件。
   ========================================================================== */

/* ---- 可达性：跳转链接与可见焦点 ---- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 60;
  background: var(--ink);
  color: var(--surface);
  padding: 8px 16px;
  border-radius: var(--radius-s);
  font-size: var(--type-ui-size);
  line-height: var(--type-ui-lh);
  text-decoration: none;
}
.skip-link:focus-visible { top: 8px; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- 页面骨架 ---- */
.tool-page-head { padding: 32px 0 8px; }
.tool-page-title { margin: 0 0 8px; }
.tool-page-note { margin: 0; color: var(--sub); max-width: 46em; }

.tool-section { margin-top: 32px; }
.tool-section > h2 { margin: 0 0 4px; }
.tool-section-note { margin: 0 0 12px; color: var(--weak); }

/* ---- 查询控件 ---- */
.query-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin: 16px 0 24px;
}
.query-bar label { display: flex; align-items: center; gap: 8px; color: var(--sub); }
.query-input, .query-select, .query-date {
  font: inherit;
  font-size: var(--type-ui-size);
  line-height: var(--type-ui-lh);
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--control);
  border-radius: var(--radius-s);
  padding: 6px 12px;
  min-height: 36px;
}
.query-input { min-width: 16em; flex: 1 1 16em; max-width: 28em; }
.query-bar .query-select, .query-bar .query-date { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.query-input::placeholder { color: var(--weak); }
.query-input:focus-visible, .query-select:focus-visible, .query-date:focus-visible { outline-offset: 0; }
.btn {
  font: inherit;
  font-size: var(--type-ui-size);
  line-height: var(--type-ui-lh);
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--control);
  border-radius: var(--radius-s);
  padding: 6px 16px;
  min-height: 36px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn:hover { background: var(--bg); }
.btn[disabled] { opacity: 0.45; cursor: default; }
.btn-primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn-primary:hover { background: #3A3E45; }

/* ---- 分组目录 ---- */
.dir-groups { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .dir-groups { grid-template-columns: 1fr; } }
.dir-group { border-top: 2px solid var(--ink); padding-top: 12px; }
.dir-group > h2 { margin: 0 0 4px; }
.dir-group > p { margin: 0 0 12px; color: var(--weak); }
.dir-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dir-item a.dir-link {
  display: block;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  padding: 12px 16px;
}
.dir-item a.dir-link:hover { border-color: var(--control); }
.dir-name { display: block; font-size: var(--type-card-title-size); line-height: var(--type-card-title-lh); font-weight: 600; }
.dir-desc { display: block; margin-top: 4px; color: var(--sub); font-size: var(--type-metadata-size); line-height: var(--type-metadata-lh); }
.dir-pin {
  margin-top: 8px;
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  color: var(--weak);
  font-size: var(--type-metadata-size);
  line-height: var(--type-metadata-lh);
  font-weight: 500;
  text-align: left;
}
.dir-pin:hover { color: var(--ink); }
.dir-pin[aria-pressed="true"] { color: var(--ink); }

/* ---- 快捷与最近 ---- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip-row a {
  display: inline-block;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  padding: 6px 12px;
  font-size: var(--type-ui-size);
  line-height: var(--type-ui-lh);
  font-weight: 500;
}
.chip-row a:hover { border-color: var(--control); }

/* ---- 结果列表 ---- */
.result-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.result-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
/* 标题用块级 inline 流：长标题换行时团色点跟随末行，不掉到独立一行。 */
.result-title { }
.result-title a {
  font-size: var(--type-card-title-size);
  line-height: var(--type-card-title-lh);
  font-weight: 600;
  text-decoration: none;
}
.result-title .gdot { margin-left: 8px; }
.result-title a:hover { text-decoration: underline; }
.result-meta { color: var(--weak); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.result-note { color: var(--sub); }

/* ---- 表格 ---- */
.data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data-table { border-collapse: collapse; width: 100%; min-width: 560px; }
.data-table caption { text-align: left; color: var(--weak); padding-bottom: 8px; }
.data-table th, .data-table td {
  text-align: left;
  vertical-align: top;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line);
}
.data-table thead th {
  font-size: var(--type-label-size);
  line-height: var(--type-label-lh);
  font-weight: 600;
  color: var(--sub);
  border-bottom: 1px solid var(--control);
}
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.data-table .num { font-variant-numeric: tabular-nums lining-nums; font-kerning: none; }
button.count-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
  font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;
  font-variant-numeric: tabular-nums lining-nums;
}
/* 数字角色必须成套生效：`font: inherit` 曾把拉丁数字族覆盖回继承中文族，
 * 这里显式恢复 Number/Countdown 角色（Inter、tnum、600）。 */
button.count-link.type-countdown {
  font-family: var(--type-font-latin);
  font-size: var(--type-countdown-size);
  line-height: var(--type-countdown-lh);
  font-weight: 600;
  font-kerning: none;
}

/* ---- 阵型网格 ---- */
.formation-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.formation-grid { display: inline-grid; gap: 8px; padding: 4px 0; }
.formation-cell {
  min-width: 7.5em;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  padding: 6px 10px;
}
.formation-cell a { text-decoration: none; }
.formation-cell a:hover { text-decoration: underline; }
.formation-cell .pos { display: block; color: var(--weak); }
.formation-row-label { color: var(--weak); align-self: center; padding-right: 8px; white-space: nowrap; }

/* ---- 状态徽标 ---- */
.state-badge {
  display: inline-block;
  border: 1px solid var(--control);
  border-radius: var(--radius-s);
  padding: 1px 8px;
  font-size: var(--type-label-size);
  line-height: var(--type-label-lh);
  font-weight: 600;
  color: var(--sub);
  white-space: nowrap;
}
.state-badge.is-open { border-color: var(--ink); color: var(--ink); }
.state-badge.is-cancelled { border-style: dashed; color: var(--weak); border-color: var(--line); }

/* ---- 状态 / 反馈 ---- */
.loading-note { color: var(--weak); }
.error-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  padding: 24px;
  margin: 24px 0;
  max-width: 40em;
}
.error-box .btn { margin-top: 12px; }
.empty-note { color: var(--weak); }
.scope-note {
  border-left: 2px solid var(--line);
  padding: 4px 0 4px 12px;
  color: var(--sub);
  margin: 0 0 16px;
}
.warn-note {
  border: 1px solid var(--control);
  border-radius: var(--radius-s);
  background: var(--surface);
  padding: 8px 12px;
  color: var(--ink);
}

/* ---- 分页条 ---- */
.pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0; }

/* ---- 选拔名单成员列表 ---- */
.selection-members {
  margin: 8px 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  counter-reset: sel;
}
.selection-members li { display: flex; align-items: baseline; gap: 6px; }
.selection-members li::before {
  counter-increment: sel; content: counter(sel);
  font-family: var(--type-font-latin);
  font-size: var(--type-metadata-size); line-height: var(--type-metadata-lh);
  font-weight: 500;
  color: var(--weak); font-variant-numeric: tabular-nums lining-nums; font-kerning: none;
}
.selection-members li a { text-decoration: none; }
.selection-members li a:hover { text-decoration: underline; }
.selection-members li.is-tracked a { font-weight: 600; border-bottom: 2px solid var(--ink); }

/* ---- 观演记录控件 ---- */
.att-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.att-row.is-located { background: var(--surface); outline: 1px solid var(--control); outline-offset: 4px; }
.att-row .att-name { flex: 1 1 16em; min-width: 12em; }
.att-status { display: flex; flex-wrap: wrap; gap: 4px; }
.att-status label {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 4px 10px; cursor: pointer; background: var(--surface);
  font-size: var(--type-ui-size); line-height: var(--type-ui-lh); font-weight: 500;
}
.att-status input { accent-color: var(--ink); margin: 0; }
.att-status label:has(input:checked) { border-color: var(--ink); color: var(--ink); }
textarea.io-area {
  width: 100%; min-height: 8em; font: inherit;
  font-size: var(--type-metadata-size); line-height: var(--type-metadata-lh);
  border: 1px solid var(--control); border-radius: var(--radius-s);
  background: var(--surface); color: var(--ink); padding: 8px 12px;
}

/* ---- 简易条形（仅在有比较意义时） ---- */
.bar-row { display: grid; grid-template-columns: minmax(6em, auto) 1fr auto; gap: 8px; align-items: center; padding: 4px 0; }
.bar-track { background: var(--bg); border: 1px solid var(--line); border-radius: 3px; height: 14px; overflow: hidden; }
.bar-fill { background: var(--sub); height: 100%; }

@media (max-width: 480px) {
  .tool-page-head { padding: 24px 0 8px; }
  .query-input { min-width: 0; }
  .bar-row { grid-template-columns: minmax(4.5em, auto) 1fr auto; }
}