/* =========================================================================
   纸感设计语言 · case 页（案例研究）专属样式
   规范：docs/pr/0221-2026-07-15-notebook-design-spec.md §5 / §6(case)
   通用骨架见 skeleton.css（.page/.grid/masthead/tabs/.cue/.main/.notes）。
   此处只放 case 专属：左栏案例列表、中栏问题竖向路径、参考来源、右栏问题索引。
   形态 = 入口页版本 A：进来直接落在一个 case 里，像读一页笔记纵读。
   ========================================================================= */

/* —— 左栏：全部案例列表（当目录，点了换 case）—— */
.case-item{display:block;padding:10px 12px;margin-bottom:6px;position:relative;
  border-radius:10px 22px 12px 20px/20px 12px 22px 10px;transition:background .16s;}
.case-item .ci-t{font-size:15.5px;color:var(--ink);line-height:calc(var(--row)*.92);}
.case-item .ci-n{font-size:12.5px;color:var(--ink-soft);line-height:var(--row);margin-top:1px;}
.case-item:hover{background:var(--hi-soft);}
.case-item:hover .ci-t{color:var(--pen-deep);}
.case-item.on{background:var(--hi);}
.case-item.on .ci-t{color:var(--pen-deep);font-weight:700;}
.case-item.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2.4px;
  background:var(--pen);border-radius:2px;opacity:.75;}

/* —— 中栏：单 case 纵读 —— */
.kick{font-size:15px;color:var(--ink-soft);line-height:var(--row);}
.kick .hl{color:var(--pen-deep);font-weight:700;padding:0 3px;}
h1.term{font-size:32px;font-weight:700;color:var(--ink);line-height:calc(var(--row)*1.6);margin:0;}
.lead{font-size:16px;color:var(--ink-soft);font-style:italic;line-height:var(--row);
  margin:0 0 calc(var(--row)*.6);max-width:60ch;}

/* 问题列表：竖向手绘路径 */
.qtrack{position:relative;padding-left:40px;margin-top:var(--row);}
.qtrack::before{content:"";position:absolute;left:13px;top:12px;bottom:12px;width:2px;
  background:repeating-linear-gradient(var(--margin),var(--margin) 6px,transparent 6px,transparent 10px);opacity:.5;}
.qstep{position:relative;margin-bottom:calc(var(--row)*.7);scroll-margin-top:var(--row);}
.qstep .dot{position:absolute;left:-33px;top:2px;width:26px;height:26px;text-align:center;line-height:24px;
  font-size:13px;color:var(--pen-deep);border:1.7px solid var(--pen);background:var(--paper);
  border-radius:60% 45% 55% 50%/55% 60% 45% 55%;transform:rotate(-2deg);}
.qstep .q{font-size:16.5px;color:var(--ink);line-height:calc(var(--row)*1.05);font-weight:700;max-width:54ch;}
.qstep:hover .q{color:var(--pen-deep);}
.qstep .r{font-size:13.5px;color:var(--ink-soft);line-height:var(--row);max-width:56ch;margin-top:2px;}
.qstep .objs{display:flex;flex-wrap:wrap;gap:7px;margin-top:5px;}
.qobj{font-size:13px;color:var(--ink);padding:1px 10px;border:1.4px solid var(--ink-soft);
  background:rgba(247,243,232,.7);border-radius:52% 60% 45% 55%/60% 45% 55% 45%;transform:rotate(-.4deg);}
.qobj:hover{border-color:var(--pen);color:var(--pen-deep);}

/* —— 参考来源（信任凭据）—— */
.refs{margin-top:calc(var(--row)*1.2);padding-top:var(--row);border-top:1.5px solid var(--margin);max-width:64ch;}
.refs-h{font-size:19px;font-weight:700;line-height:calc(var(--row)*1.3);margin:0;}
.refs-h .no{color:var(--pen);font-size:15px;margin-right:8px;}
.refs-note{font-size:13.5px;color:var(--ink-soft);line-height:var(--row);margin:0 0 6px;}
.ref-list{list-style:none;margin:0;padding:0;}
.ref-item{display:flex;align-items:baseline;gap:10px;line-height:var(--row);padding:3px 0;}
.ref-kind{flex:0 0 auto;font-size:12px;color:var(--pen-deep);padding:0 8px;
  border:1.3px solid var(--pen);border-radius:52% 60% 45% 55%/60% 45% 55% 45%;transform:rotate(-1deg);}
.ref-t{font-size:15px;color:var(--ink);}
a.ref-t:hover{color:var(--pen-deep);text-decoration:underline;text-underline-offset:3px;}
.ref-todo{color:var(--ink-soft);font-style:italic;}

/* —— 右栏：本 case 问题跳转索引 —— */
.notes .jot{display:block;font-size:14px;color:var(--ink-soft);line-height:calc(var(--row)*.92);
  padding:3px 0 3px 16px;position:relative;}
.notes .jot::before{content:"";position:absolute;left:2px;top:12px;width:7px;height:7px;border:1.4px solid var(--pen);
  border-radius:60% 45% 55% 50%/55% 60% 45% 55%;opacity:.6;}
.notes .jot:hover{color:var(--pen-deep);}
.mobile-case-switch{display:none;}

@media (max-width:760px){
  .mobile-case-switch{display:flex;align-items:center;gap:10px;margin-bottom:var(--row);font-size:14px;color:var(--ink-soft);}
  .mobile-case-switch select{flex:1;min-width:0;border:1.5px solid var(--pen);background:var(--paper);color:var(--ink);
    border-radius:8px 13px 9px 12px/12px 9px 13px 8px;padding:9px 10px;font:15px var(--hand);}
  h1.term{font-size:29px;line-height:calc(var(--row)*1.4);}
  .lead{font-size:15.5px;}
  .qtrack{padding-left:36px;}
  .qstep .q{font-size:16px;}
  .ref-item{align-items:flex-start;gap:8px;}
  .ref-t{font-size:14px;line-height:calc(var(--row)*.9);}
  .notes{border-top:1.5px solid var(--margin);padding-top:var(--row);}
}