/* =========================================================================
   纸感设计语言 · 三页共用骨架
   规范：docs/pr/0221-2026-07-15-notebook-design-spec.md §4/§5
   左目录 + 中央舞台 + 右栏索引，三页共用；舞台换内容、骨架不动。
   ========================================================================= */

/* —— 页面容器 & 三列网格（§4）—— */
.page{max-width:1340px;margin:0 auto;padding:0 46px;}
.grid{
  display:grid;
  grid-template-columns:184px minmax(0,1fr) 208px;  /* 左目录 | 中央舞台 | 右栏 */
  column-gap:52px;
}
/* 案例入口页左栏略宽（case 标题长）：在页面上加 .grid--wide-cue 覆盖 */
.grid--wide-cue{grid-template-columns:210px minmax(0,1fr) 208px;}

/* =========================================================
   页首：写在纸最上方的字，不是工具条（§5 印刷层 + 手写层）
   ========================================================= */
.masthead{grid-column:1 / -1;padding-top:var(--row);}
.mh-row{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;line-height:calc(var(--row)*1.4);}
.wordmark{font-size:27px;font-weight:700;color:var(--ink);transform:rotate(-.6deg);}
.wordmark .amp{color:var(--pen);}

.tabs{display:flex;gap:20px;}
.tabs a{font-size:17px;color:var(--ink-soft);position:relative;padding:0 2px;}
.tabs a:hover{color:var(--ink);}
/* hover 轻扫荧光（透出横线） */
.tabs a:hover::before{content:"";position:absolute;z-index:-1;left:-2px;right:-2px;top:52%;
  height:58%;transform:translateY(-50%) rotate(-.9deg);pointer-events:none;
  background:linear-gradient(92deg,transparent,var(--hi-soft) 6%,var(--hi-soft) 90%,transparent);
  border-radius:45% 55% 50% 60%/60% 45% 55% 45%;}
/* 当前视图：绿笔手圈（不规则椭圆 + 微旋转） */
.tabs a.on{color:var(--pen-deep);font-weight:700;}
.tabs a.on::after{content:"";position:absolute;left:-6px;right:-6px;top:-3px;bottom:-4px;
  border:1.6px solid var(--pen);border-radius:60% 45% 55% 50%/55% 60% 45% 55%;
  transform:rotate(-1.2deg);opacity:.85;}

.mh-spacer{flex:1;}
.find{position:relative;font-size:15px;color:var(--ink-soft);}
.find input{border:none;background:transparent;outline:none;width:120px;font-family:var(--hand);
  border-bottom:1.5px solid var(--margin);padding-bottom:1px;color:var(--ink);}
.find input::placeholder{color:var(--ink-soft);}
.find-pop{position:absolute;z-index:30;right:0;top:calc(100% + 8px);display:block;width:min(340px,82vw);
  max-height:56vh;overflow:auto;background:var(--paper);border:1.5px solid var(--margin);
  border-radius:6px 12px 7px 11px/11px 7px 12px 6px;box-shadow:2px 3px 0 rgba(178,86,52,.12);}
.find-pop[hidden]{display:none;}
.find-item{display:block;padding:7px 12px;border-bottom:1px solid var(--margin-soft);line-height:calc(var(--row)*.88);}
.find-item:last-child{border-bottom:none;}
.find-item:hover,.find-item.on{background:var(--hi-soft);}
.find-title{display:block;font-size:15px;color:var(--ink);}
.find-item:hover .find-title,.find-item.on .find-title{color:var(--pen-deep);font-weight:700;}
.find-item small{display:block;font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.find-pop mark{background:var(--hi);color:inherit;border-radius:3px;padding:0 1px;}
.find-empty{display:block;padding:7px 12px;font-size:13px;color:var(--ink-soft);font-style:italic;}

/* 页首双线（印刷层） */
.dblrule{grid-column:1 / -1;height:var(--row);position:relative;}
.dblrule::before,.dblrule::after{content:"";position:absolute;left:0;right:0;
  border-top:1.5px solid var(--margin);opacity:.6;}
.dblrule::before{top:8px;}
.dblrule::after{top:12px;opacity:.35;}

/* =========================================================
   左：线索栏 / 目录（靠边距线，不是面板）
   ========================================================= */
.cue{padding:var(--row) 18px var(--row) 0;position:sticky;top:0;align-self:start;
  max-height:100vh;overflow:auto;}
.cue-h{font-size:15px;color:var(--ink-soft);line-height:var(--row);margin-bottom:2px;
  transform:rotate(-.5deg);}

/* =========================================================
   中：中央舞台（三页换内容，骨架不动）
   正文靠一条赭红边距线，字压在横线上
   ========================================================= */
.main{padding:var(--row) 34px;border-left:1.5px solid var(--margin);position:relative;}
/* 边距线内侧洇色（印刷层） */
.main::before{content:"";position:absolute;left:0;top:0;bottom:0;width:20px;
  background:linear-gradient(90deg,var(--margin-soft),transparent);}

/* =========================================================
   右：页边旁注 / 索引（随手记，无框）
   ========================================================= */
.notes{padding:var(--row) 0 var(--row) 24px;position:sticky;top:0;align-self:start;
  max-height:100vh;overflow:auto;}
.n-h{font-size:15px;color:var(--ink-soft);line-height:var(--row);transform:rotate(-.5deg);}
.n-block{margin-bottom:var(--row);}

@media (max-width:760px){
  .page{max-width:none;padding:0 16px;}
  .grid,.grid--wide-cue{display:grid;grid-template-columns:minmax(0,1fr);column-gap:0;}
  .masthead,.dblrule,.cue,.main,.notes{grid-column:1;}
  .masthead{padding-top:14px;}
  .mh-row{gap:8px 14px;line-height:calc(var(--row)*1.15);}
  .wordmark{flex:0 0 100%;font-size:23px;}
  .tabs{order:2;gap:10px;justify-content:space-between;flex:1;}
  .tabs a{font-size:14.5px;white-space:nowrap;}
  .mh-spacer{display:none;}
  .find{order:3;flex:0 0 100%;display:flex;align-items:center;gap:8px;margin-top:2px;}
  .find input{flex:1;width:auto;min-width:0;font-size:15px;}
  .find-pop{left:0;right:0;width:auto;top:calc(100% + 6px);}
  .dblrule{height:calc(var(--row)*.75);}
  .cue{display:none;}
  .main{padding:var(--row) 0 calc(var(--row)*1.2);border-left:0;min-width:0;}
  .main::before{display:none;}
  .notes{position:static;max-height:none;overflow:visible;padding:0 0 calc(var(--row)*3);}
  .notebook-mascot{display:none;}
}