/* ==================== 钩子页 ====================
   共用 style.css 的卡片/筛选/表单样式，这里只放钩子页独有的部分：
   顶部「时间范围下拉 + 日期筛选 + 分类/日两个汇总切换」、卡片两行的右侧文本、
   可点击的成功/失败标签、展开区的描述行与四字段网格、汇总卡的多项统计行。
*/

/* ---------- 顶部：时间范围 + 日期 + 两个汇总按钮 ---------- */
.hook-bar {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 0;
  max-width: var(--content-max); margin-left: auto; margin-right: auto;
}
/* 不用 .chip-select：那个类在窄屏默认 display:none，只有 .filter-row.has-select 里才显示。
   选项最长 2 个字，按内容收缩即可（原 flex:1 占满是为了让按钮靠右，现按钮多了改为流式排） */
.hook-range {
  flex: 0 1 auto; min-width: 96px;
  padding: 9px 30px 9px 12px; border: 1.5px solid var(--line-2); border-radius: 12px;
  background-color: #fff; color: var(--text-2);
  font-size: 13px; font-weight: 500; font-family: inherit;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6275' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}
.hook-range:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(79, 110, 247, .12); }
/* 两个汇总按钮文案 5~7 字，84px 定宽装不下，按内容伸缩 */
.hook-view-btn {
  flex: 1 1 auto; min-width: 0; padding: 9px 2px; border: 1.5px solid var(--line-2); border-radius: 12px;
  background: #fff; color: var(--text-2); font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: all .18s ease;
}
.hook-view-btn:active { transform: scale(.97); }
.hook-view-btn.active {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 4px 14px rgba(79, 110, 247, .28);
}
/* 日期按钮文案带范围（如 11-04~11-08(12条)），按内容伸缩、84px 保底，不参与剩余分配 */
.hook-date-btn { flex: 0 1 auto; min-width: 84px; padding-left: 10px; padding-right: 10px; }

/* 对抗失败的卡片：左侧状态线与「失败」标签同色，长列表里一眼扫出哪条没顶住。
   .card::before 是 (0,1,1)，这条是 (0,2,1)，优先级够，不用 !important */
.card.hook-fail::before { background: var(--red); }

/* ---------- 卡片第一行：类型（左）+ 地点（右） ---------- */
.hook-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hook-head .task-title { min-width: 0; overflow-wrap: anywhere; }
.hook-place {
  flex: none; max-width: 46%; font-size: 12px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- 卡片第二行：时间（左）+ 成功/失败（右，点击即切换） ---------- */
.hook-time { font-size: 12px; color: var(--muted); white-space: nowrap; }
/* 汇总卡右上角的「本周 11-02~11-08」：比时间小一号，给左侧「类型 · 地点」让出宽度 */
.hook-week { flex: none; font-size: 11px; color: var(--muted); white-space: nowrap; }
/* 成功态灰底灰字（红色只留给失败做警示）；展开区整行标签与汇总卡「最近一次」共用此类 */
.hook-resist {
  display: inline-block; padding: 1px 8px; border-radius: 8px;
  background: var(--bg); color: var(--text-2);
  font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background .2s ease;
}
.hook-resist.fail { background: #fdeef0; color: var(--red); }

/* 新增弹窗里的对抗结果二选一 */
.hook-pick { display: flex; gap: 8px; margin-bottom: 11px; }

/* ---------- 展开区第一行：描述（点击弹窗修改） ---------- */
.hook-desc {
  margin-bottom: 10px; padding: 9px 11px;
  border: 1.5px dashed var(--line-2); border-radius: 10px;
  font-size: 13.5px; color: var(--text-2); cursor: pointer;
  white-space: pre-wrap; overflow-wrap: anywhere;
  transition: border-color .2s ease, background .2s ease;
}
.hook-desc:active { background: var(--bg); }
.hook-desc-empty { color: var(--muted); }
/* 有内容时挂 .desc-md（style.css 提供 MD 元素样式）。
   MD 模式的块级换行由 <p>/<br> 负责，必须解除上面的 pre-wrap；
   且 hook.css 后于 style.css 加载、同优先级会反过来被 pre-wrap 压住，
   所以这里用双类选择器抬高优先级，不用 !important */
.hook-desc.desc-md { white-space: normal; }

/* ---------- 展开区第二行：类型 / 地点 / 时间 / 对抗结果 ----------
   卡片自身宽度有限（手机上满宽、桌面上只有三列栅格里的一列），
   所以按卡片内部分两列排，时间与对抗结果各占一整行 */
.hook-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hook-fields .field { width: 100%; min-width: 0; margin-bottom: 0; }
.hook-fields .hook-time-input { grid-column: 1 / -1; }
.hook-fields .hook-resist {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 8px; font-size: 13px;
}

/* ---------- 汇总卡：不可展开，只有两行信息 ---------- */
.hook-sum-main { cursor: default; }
.hook-sum-meta { flex-wrap: wrap; gap: 4px 10px; }
.hook-sum-meta .hook-resist { cursor: default; }
/* 汇总卡「失败」计数：有失败才标红（0 时保持灰，红色只作警示） */
.hook-sum-fail { color: var(--red); font-weight: 600; }

/* 筛选行在桌面上别拉满整行；控件从 3 个变 4 个，放宽到 520，放不下自动换行 */
@media (min-width: 640px) {
  .hook-bar { max-width: 520px; }
}