/* 页面专属补充层 · 只写 var() 和 sq- 前缀
   ⛔ 不覆写任何 v- 原子的颜色/尺寸；这里只做本页独有的三件事：
   1. topbar 内部布局（kit 的 .v-topbar 假设直接放两个孩子，这里套了 .v-wrap）
   2. 人卡的「钩子」区块 + 见过了按钮
   3. 强度星标 */

.sq-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}

/* 列表卡：无图，所以把 shot 那一格去掉，改成左侧的强度条 */
.sq-list-sect .v-card { flex-direction: column; }

.sq-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
}
.sq-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px; font-weight: 900; line-height: 1.25;
}
.sq-meta {
  margin: 0;
  font-size: var(--t-sm); font-weight: 800; color: var(--muted);
}

.sq-stars {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 1px; color: var(--salmon-ink); white-space: nowrap;
}

.sq-why {
  margin: 0;
  font-size: var(--t-sm); font-weight: 600; line-height: var(--lh-relaxed);
  color: color-mix(in srgb, var(--ink) 80%, var(--paper));
}

/* 钩子＝现场第一句话，给它一条竖线让眼睛先落这儿 */
.sq-hook {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-left: var(--bw-bold) solid var(--salmon);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--salmon) 12%, var(--paper));
  font-size: var(--t-sm); font-weight: 700; line-height: var(--lh-relaxed);
  color: var(--ink);
}

.sq-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* 见过了：切换后整卡降透明 + 划线，⛔ 不隐藏（她要能翻回去看） */
.sq-seen {
  flex: 0 0 auto;
  min-height: 32px; padding: 0 var(--s-4);
  border: var(--bw) solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--paper); color: var(--muted);
  font: inherit; font-size: var(--t-xs); font-weight: 800;
  cursor: pointer; white-space: nowrap;
}
.sq-seen[aria-pressed="true"] {
  border-color: var(--teal-ink); background: var(--mint); color: var(--teal-ink);
}
/* 划掉态：⛔ 永远不要用 opacity 降整卡。
   我试过 .5 和 .85，两个都不行——整卡降透明＝卡底和字一起往页面底色混，
   而设计系统的 tint 标签本来就只有 4.59–4.68（贴着 AA 线），任何降透明都把它压穿：
     深色 .5 → 城市行 2.49 ✗ ／ 浅色 .85 → 标签 3.50 ✗、见过了按钮 3.53 ✗
   ⇒ 这不是「调到哪一档合适」的问题，是机制选错了。tint 标签没有余量给我花。
   改成三重零对比度代价的信号：名字划线 + 名字转 muted + 「见过了」薄荷丸子。
   ⛔ 也别给它加 background: var(--paper-soft)（深色下提亮底色，城市行 4.85→4.48 ✗）。
   她要能翻回去看，所以划掉只改「样子」不改「读不读得了」。 */
.v-card.is-seen .sq-name {
  text-decoration: line-through; text-decoration-thickness: 2px;
  color: var(--muted);
}

/* 必见（邓荣）：金描边，复用设计系统的获奖态语义 */
.v-card.is-must { border-color: var(--gold-ink); border-width: var(--bw-bold); }

/* 整张卡可点进详情 ⇒ 给个手型，但⛔ 不做成 <button>（卡里已经有「划掉」按钮，会嵌套） */
.sq-list-sect .v-card { cursor: pointer; }
.sq-tip { margin: 0 0 var(--s-5); }

/* 进详情的按钮：键盘用户的入口，⛔ 别删（不然整卡可点对 Tab 用户等于不存在） */
.sq-more {
  align-self: flex-start;
  min-height: 32px; padding: 0 var(--s-4);
  border: var(--bw) dashed var(--line-dashed); border-radius: var(--r-pill);
  background: none; color: var(--muted);
  font: inherit; font-size: var(--t-xs); font-weight: 800;
  cursor: pointer;
}
.sq-more:hover { border-style: solid; border-color: var(--line-strong); color: var(--ink); }

/* ---- 详情模态内部 ---- */
.sq-mypart {
  margin: var(--s-5) 0 var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-4);
}
/* 我的判断 vs 他的原话必须能分清 ⇒ 给判断区一行落款 */
.sq-byline {
  margin: 0;
  font-size: var(--t-xs); font-weight: 800; color: var(--muted);
}
/* ⚠️ 设计系统只有 hero/h1/h2/h3 四档，⛔ 没有 --t-h4（我一度编了这个 token）。
   这里要比 .v-modal-title(--t-h3) 小一档 ⇒ 用 --t-lede，别自己造刻度。 */
.sq-h3 {
  margin: var(--s-8) 0 var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-lede); font-weight: 900; line-height: var(--lh-tight);
}
.sq-dl { margin: 0; display: flex; flex-direction: column; gap: var(--s-5); }
.sq-row { display: grid; gap: var(--s-2); }
.sq-row dt {
  font-family: var(--font-mono);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em;
  color: var(--muted);
}
.sq-row dd {
  margin: 0;
  font-size: var(--t-sm); font-weight: 600; line-height: var(--lh-relaxed);
  white-space: pre-wrap;   /* 他自己敲的换行留着，⛔ 不给他重排 */
}
.sq-abils { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.sq-abil {
  padding: var(--s-3) var(--s-4);
  border: var(--bw) solid var(--line); border-radius: var(--r-xs);
  display: grid; gap: 2px;
}
.sq-abil b { font-size: var(--t-sm); font-weight: 800; }
.sq-abil span {
  font-size: var(--t-sm); font-weight: 600; line-height: var(--lh-relaxed);
  color: color-mix(in srgb, var(--ink) 80%, var(--paper));
}
/* 和她重叠的能力：只描边不填色（⛔ 别用 tint 底，那层没有对比度余量） */
.sq-abil.is-mine { border-color: var(--teal-ink); border-width: var(--bw-mid); }
.sq-mine {
  margin-left: var(--s-2);
  font-style: normal; font-family: var(--font-mono);
  font-size: var(--t-xs); font-weight: 700; color: var(--teal-ink);
}
.sq-foot-note { margin-top: var(--s-6); }

@media (min-width: 720px) {
  .v-card-grid.is-list { grid-template-columns: 1fr 1fr; }
  .sq-row { grid-template-columns: 88px 1fr; gap: var(--s-4); align-items: baseline; }
}