/* ==========================================================================
   StudyOps — views/cards.css
   知识点卡片：feed 式列表 + Anki 翻卡弹窗
   （2026-09-13 改版：列表不再就地展开，正文只在弹窗里出现）
   ========================================================================== */

.kp-controls-note { margin-left: auto; font-size: 11px; }

/* ---------- 列表：推文式 feed ---------- */

/* 整块一张卡、条目之间只用发丝线分隔：读起来是 feed，不是一排可展开面板 */
.kp-feed { padding: 0; overflow: hidden; }
.kp-item {
  position: relative;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 14px 18px;
  text-align: left;
  transition: background-color 0.15s ease;
}
.kp-item + .kp-item { border-top: 1px solid var(--border); }
/* 左侧强调条：hover / 键盘聚焦时从中间展开 */
.kp-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--red-500);
  transform: scaleY(0);
  transition: transform 0.15s ease;
}
.kp-item:hover,
.kp-item:focus-visible { background-color: var(--hover); }
.kp-item:hover::before,
.kp-item:focus-visible::before { transform: scaleY(1); }
/* feed 行整行太大，按压缩放会晃：只染色，不缩放 */
.kp-item:active { transform: none; background-color: var(--hover); }
.kp-item:focus-visible { outline: 1px solid var(--red-500); outline-offset: -1px; }

.kp-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kp-item-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.kp-item-meta {
  font-size: 11px;
  color: var(--sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kp-item-go {
  flex-shrink: 0;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--sub);
  opacity: 0.7;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kp-item:hover .kp-item-go,
.kp-item:focus-visible .kp-item-go {
  opacity: 1;
  color: var(--red-500);
  border-color: rgba(239, 68, 68, 0.4);
}

/* ---------- 弹窗：Anki 背诵卡 ---------- */

.anki-overlay { padding: 24px 16px; overscroll-behavior: contain; }
.anki-shell {
  max-width: 620px;
  padding: 20px 22px 18px;
  gap: 12px;
  overscroll-behavior: contain;
}
.anki-head { padding-bottom: 10px; }

/* 进度：第几张 / 共几张 */
.anki-progress { height: 2px; background-color: var(--border); overflow: hidden; }
.anki-progress i { display: block; height: 100%; background-color: var(--red-500); transition: width 0.2s ease; }

/* 卡台：固定高度，两面都绝对定位铺满 —— 翻面时外框不跳动 */
.anki-stage { height: clamp(300px, 48vh, 500px); perspective: 1600px; }
.anki-card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  outline: none;
  transform-style: preserve-3d;
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.anki-card.is-flipped { transform: rotateY(180deg); }
.anki-card:focus-visible { outline: 1px solid var(--red-500); outline-offset: 2px; }

.anki-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px;
  border: 1px solid var(--card-border);
  border-radius: 2px;
  background-color: var(--card-bg);
  overflow-y: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.anki-face--front { align-items: center; justify-content: center; text-align: center; }
.anki-face--back { transform: rotateY(180deg); }
.anki-eyebrow { font-size: 10px; letter-spacing: 0.14em; color: var(--sub); }
.anki-front-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.45; }
.anki-front-meta { font-size: 11px; color: var(--sub); }
.anki-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  font-size: 10px;
  color: var(--sub);
  opacity: 0.75;
}

.kp-content { font-size: 14px; line-height: 1.9; }
.kp-content .katex-display { margin: 6px auto; }

.anki-bar { display: flex; align-items: center; gap: 8px; }
.anki-bar .btn-mini { padding: 8px 12px; font-size: 11px; }
.anki-count { margin-left: auto; font-size: 11px; color: var(--sub); }
.anki-mask-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.anki-mask-label { font-size: 10px; letter-spacing: 0.1em; color: var(--sub); }
.anki-keys { margin-left: auto; font-size: 10px; }

/* 遮罩：移植 668 hide-zone 思路（透明文字 + 灰块），含公式段整段模糊 */
.kp-mask {
  cursor: pointer;
  border-radius: 2px;
}
.kp-mask .kp-mask-inner {
  color: transparent !important;
  background-color: #9aa0a6;
  border-radius: 2px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.kp-mask--formula .kp-mask-inner {
  color: inherit !important;
  background-color: transparent;
  filter: blur(9px);
}
.kp-mask.revealed .kp-mask-inner {
  color: inherit !important;
  background-color: transparent;
  filter: none;
  -webkit-user-select: auto;
  user-select: auto;
}

/* 移动端：做题 / 背诵触控加大，字号上调 */
@media (max-width: 900px) {
  .view-controls-only .btn-tab { white-space: nowrap; padding: 10px 12px; }
  .view-controls-only > span { display: none; }
  .drill-card { padding: 18px 14px; }
  .drill-stem { font-size: 16px; }
  .drill-option {
    min-height: 48px;
    padding: 14px;
    font-size: 15px;
  }
  .drill-option-key { font-size: 15px; }
  .btn-drill-draw, .btn-drill-submit { min-height: 48px; }
  .drill-actions .btn-drill-submit, .drill-actions .btn-drill-draw { flex: 1; justify-content: center; }
  .grid-12 { gap: 14px; }

  /* 列表 */
  .kp-item { padding: 14px 12px 14px 14px; gap: 10px; }
  .kp-item-title { font-size: 16px; -webkit-line-clamp: 3; }
  .kp-item-meta { font-size: 11px; white-space: normal; }
  .kp-item-go { display: none; }

  /* 弹窗整屏：卡台跟着视口长，操作条放大到触控尺寸（安全区在 mobile.css 补） */
  .anki-overlay { padding: 0; }
  .anki-shell {
    max-width: none;
    height: 100%;
    border: 0;
    border-radius: 0;
    padding-left: 16px;
    padding-right: 16px;
  }
  .anki-stage { height: auto; flex: 1; min-height: 240px; }
  .anki-front-title { font-size: 20px; }
  .anki-bar { gap: 6px; }
  .anki-bar .btn-mini { flex: 1; min-height: 44px; justify-content: center; font-size: 12px; }
  .anki-count { margin-left: 0; }
  .anki-keys { display: none; }
  .anki-mask-row .btn-mini { padding: 8px 12px; min-height: 40px; }
  .kp-content { font-size: 15px; }
}