/* ============================================================
 * 薯灵感 SparkNote · Focus Layout（聚焦排版）
 * 范式来源：AI 工坊 workshop.html
 *   ① 内容区收窄到 1080px 居中  → 视线不外散
 *   ② 一级 Tab 一次只暴露一个任务 → 不用来回翻长页
 *   ③ 一卡一事：输入卡 / 结果卡分离 → 单屏只有一个动作
 *   ④ 结果区默认不占位 → 出结果才占用视觉带宽
 *   ⑤ 同屏多个分区收纳为手风琴 → 一次只看一件事
 * 只做「增补」，不覆盖既有 .page / .card / .sort-bar 规则。
 * ============================================================ */

/* ---------- 1. 容器：与 AI 工坊同宽 ---------- */
.wk-wrap { max-width: 1080px; margin: 0 auto; }
.page.wk-focus { max-width: 1080px; }
.page.wk-focus > .sec-head { margin-bottom: var(--s-14); }
.page.wk-focus > .wk-panel > .card,
.page.wk-focus > .wk-panel > * > .card { margin-bottom: var(--s-14); }

/* ---------- 2. 一级 Tab：AI 工坊胶囊条 ---------- */
.wk-tabs {
  display: flex; align-items: center; gap: var(--s-6);
  padding: var(--s-10) 0 var(--s-12); margin-bottom: var(--s-12);
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  background: linear-gradient(180deg, var(--bg) 76%, rgba(251, 249, 250, 0));
  /* 贴合吸顶导航下沿：--wk-top 由 JS 判定写入（顶栏真吸顶则让位，否则 0），缺省 62px 与 .pl-steps 一致 */
  position: sticky; top: var(--wk-top, 62px); z-index: 40;
}
.wk-tabs::-webkit-scrollbar { display: none; }

.wk-tabs .sopt,
.wk-tabs .wk-tab {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--s-6);
  padding: var(--s-8) var(--s-16); border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--card); color: var(--ink2);
  font-size: 14px; font-weight: 600; line-height: 1.25;
  cursor: pointer; white-space: nowrap;
  transition: color var(--t-fast) var(--ease-standard),
              background var(--t-fast) var(--ease-standard),
              border-color var(--t-fast) var(--ease-standard),
              transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-med) var(--ease-standard);
}
.wk-tabs .sopt:hover,
.wk-tabs .wk-tab:hover { color: var(--red-500-text, #D81B37); border-color: var(--red-200); transform: translateY(-1px); }
.wk-tabs .sopt:active,
.wk-tabs .wk-tab:active { transform: scale(.96); }

.wk-tabs .sopt.on,
.wk-tabs .wk-tab.on {
  background: var(--pink-grad); border-color: transparent; color: #fff;
  box-shadow: var(--shadow-red); font-weight: 700;
}
.wk-tabs .sopt.on .cstab-icon,
.wk-tabs .wk-tab.on .cstab-icon { opacity: .95; }
.wk-tabs .sopt:focus-visible,
.wk-tabs .wk-tab:focus-visible { outline: 2px solid var(--red-300); outline-offset: 2px; }

/* ---------- 3. 面板：一次只显示一个 ---------- */
.wk-panel { display: none; }
.wk-panel.on { display: block; animation: wkPanelIn .34s var(--ease-out-expo) both; }
@keyframes wkPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 4. 结果区：默认不占位，出结果才现身 ---------- */
.wk-result { display: none; }
.wk-result.show { display: block; animation: wkResultIn .36s var(--ease-out-expo) both; }
@keyframes wkResultIn {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 5. 任务手风琴：把纵向平铺的分区收成一次一个 ---------- */
.wk-task {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color var(--t-med) var(--ease-standard),
              box-shadow var(--t-med) var(--ease-standard);
}
.wk-task + .wk-task { margin-top: var(--s-10); }
.wk-task.open { border-color: var(--red-100); box-shadow: var(--shadow-sm); }

.wk-task-head {
  display: flex; align-items: center; gap: var(--s-10);
  width: 100%; padding: var(--s-12) var(--s-16);
  border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700;
  color: var(--ink2); text-align: left;
  transition: background var(--t-fast) var(--ease-standard), color var(--t-fast);
}
.wk-task-head:hover { background: var(--red-50); }
.wk-task.open > .wk-task-head { color: var(--ink); }
.wk-task-head:focus-visible { outline: 2px solid var(--red-300); outline-offset: -2px; }

.wk-task-num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--line); color: var(--ink3);
  font-size: 12px; font-weight: 800; line-height: 1;
  transition: background var(--t-med), color var(--t-med), box-shadow var(--t-med);
}
.wk-task.open > .wk-task-head .wk-task-num {
  background: var(--pink-grad); color: #fff; box-shadow: var(--shadow-red);
}
.wk-task-label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-task-caret {
  flex: 0 0 auto; display: inline-flex; color: var(--ink4);
  transition: transform var(--t-med) var(--ease-out-expo), color var(--t-med);
}
.wk-task.open > .wk-task-head .wk-task-caret { transform: rotate(90deg); color: var(--red-500-text, #D81B37); }

.wk-task-body { display: none; padding: 2px var(--s-16) var(--s-16); }
.wk-task.open > .wk-task-body { display: block; animation: wkBodyIn .3s var(--ease-out-expo) both; }
@keyframes wkBodyIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
/* 原始标题已由 head 复述，隐藏避免重复 */
.wk-task-body > .pl-step-title { display: none !important; }

/* 手风琴容器里不再保留原 .card-pad 的外框（已是 task 卡） */
.card-pad > .wk-task:only-child { margin-top: 0; }

/* ---------- 6.5 子站（deals / ledger）：表单出现时收起列表，一屏只有一个任务 ---------- */
.wrap.wk-focus { max-width: 1080px; }
body.wk-form-on .wrap > .card:not(#formCard),
body.wk-form-on .wrap > .stats { display: none; }
body.wk-form-on .wrap > #formCard.show {
  animation: wkResultIn .36s var(--ease-out-expo) both;
}
.wk-hint { font-size: var(--fs-sm); color: var(--ink3); line-height: 1.7; }
.wk-note {
  font-size: var(--fs-sm); line-height: 1.75; color: var(--ink2);
  background: var(--pink-grad-soft); border: 1px solid var(--red-100);
  border-radius: var(--r-md); padding: var(--s-12) var(--s-14);
}

/* ---------- 7. 移动端降级 ---------- */
@media (max-width: 768px) {
  .page.wk-focus { padding: var(--s-14) var(--s-12) 84px; }
  .wk-tabs {
    padding: var(--s-8) var(--s-12) var(--s-10); margin-left: -12px; margin-right: -12px;
  }
  .wk-tabs .sopt, .wk-tabs .wk-tab { padding: var(--s-8) var(--s-12); font-size: 13px; }
  .wk-task-head { padding: var(--s-12) var(--s-12); font-size: 14px; }
  .wk-task-body { padding: 2px var(--s-12) var(--s-14); }
}

/* ---------- 8. 无障碍：尊重减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .wk-panel.on, .wk-task.open > .wk-task-body, .wk-result.show { animation: none !important; }
  .wk-tabs .sopt, .wk-tabs .wk-tab,
  .wk-task-head, .wk-task-caret, .wk-task-num, .wk-task { transition: none !important; }
}