/* 使用本机优先的手写字体栈，不请求远程字体，避免字体替换造成首屏布局偏移。 */

/* ==========================================================================
   蓝色大肥鱼 · 组件层（手绘涂鸦风 · 蓝白）
   --------------------------------------------------------------------------
   本文件是「③ 组件层」：纸卡 / 按钮 / 便签 / 工具条 / 卡片等公共组件都在这里，
   各页页内 <style> 只放该页专属版式。
     · 颜色、字号、间距、圆角、阴影、动效时长一律取自 tokens.css，不写硬编码色值；
     · 底层是网格纸背景，组件是白纸卡片（2px 墨线 + 硬投影 + 微旋转）悬浮其上；
     · 旋转只给装饰容器，输入控件保持水平；悬停约定统一为「摆正抬起」。
   ========================================================================== */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* ---- 网格纸背景层 ---- */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-primary);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  background-attachment: fixed;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-style: wavy; }

::selection { background: var(--marker-soft); color: var(--ink); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--paper); border-left: 2px solid var(--ink); }
::-webkit-scrollbar-thumb { background: var(--ink); border-radius: var(--radius-pill); border: 3px solid var(--paper); }

/* ---- 手绘小工具 ---- */
.hover-wiggle:hover { animation: wiggle var(--duration-3) ease-in-out; }
@keyframes wiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
  75% { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

.marker-highlight { position: relative; z-index: 1; }
.marker-highlight::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: var(--space-1);
  left: calc(var(--space-1) * -1.5);
  right: calc(var(--space-1) * -2.5);
  height: 42%;
  background-color: var(--marker-soft);
  transform: rotate(-1deg);
  opacity: 0.9;
  border-radius: var(--radius-sm);
}

.tape-strip {
  position: absolute;
  width: 104px;
  height: 28px;
  background-color: var(--tape);
  background-image: linear-gradient(90deg, transparent, var(--tape-shine), transparent);
  box-shadow: var(--shadow-tape);
  transform: rotate(-3deg) translateX(-50%);
  left: 50%;
  top: calc(var(--space-3) * -1);
  z-index: 10;
  border-left: 1px dashed var(--on-art-line);
  border-right: 1px dashed var(--on-art-line);
}

.icon { flex: none; }

/* ---- 错落纸卡：微旋转交替，悬停统一「摆正抬起」 ---- */
.tilt-l, .tilt-r {
  transition: transform var(--duration-2) ease, box-shadow var(--duration-2) ease;
}
.tilt-l { transform: rotate(-0.8deg); }
.tilt-r { transform: rotate(0.8deg); }
.tilt-l:hover,
.tilt-r:hover {
  position: relative;
  transform: rotate(0) translate(-2px, -2px);
  box-shadow: var(--shadow-paper-lg);
  z-index: 2;
}

/* ---- 壳层：悬浮纸条 ---- */
.topbar {
  position: sticky;
  top: var(--space-3);
  z-index: var(--z-sticky, 20);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-3) var(--space-4) 0;
  padding: var(--space-2) var(--space-5);
  background: var(--paper-card);
  border: 2px solid var(--ink);
  border-radius: var(--radius-sketchy-alt);
  box-shadow: var(--shadow-paper);
  transform: rotate(-0.4deg);
}
.brand { display: flex; align-items: center; gap: var(--space-2); color: var(--text-primary); }
.brand:hover { text-decoration: none; }
.brand-mark img {
  width: 32px;
  height: 32px;
  display: block;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--marker-soft);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-family: var(--font-marker); font-weight: normal; font-size: var(--text-lg); }
.brand-text small { color: var(--text-secondary); font-family: var(--font-hand); font-size: var(--text-sm); }
.topnav { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; font-family: var(--font-hand); font-size: var(--text-lg); font-weight: bold; }
.topnav a { color: var(--text-primary); }
.topnav a.is-active, .topnav a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
}

/* ---- 语言切换器（dist/lang.js 注入 .topnav 末尾）：三枚歪斜小贴纸，选中那枚摆正压墨 ---- */
.lang-switch { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-2); }
.lang-switch-btn {
  min-width: 30px;
  padding: 2px var(--space-2);
  background: var(--paper-card);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper-sm);
  color: var(--text-primary);
  font-family: var(--font-hand);
  font-size: var(--text-sm);
  font-weight: bold;
  line-height: 1.4;
  cursor: pointer;
  transition: transform var(--duration-1) ease, box-shadow var(--duration-1) ease;
}
.lang-switch-btn:nth-child(3n+1) { transform: rotate(-2deg); }
.lang-switch-btn:nth-child(3n+2) { transform: rotate(1.6deg); }
.lang-switch-btn:nth-child(3n) { transform: rotate(-0.8deg); }
.lang-switch-btn:hover {
  color: var(--brand);
  transform: rotate(0) translate(-1px, -1px);
  box-shadow: var(--shadow-paper);
}
.lang-switch-btn[aria-pressed="true"] {
  color: var(--brand-ink);
  background: var(--brand);
  transform: rotate(0);
  box-shadow: var(--shadow-paper);
}

/* 窄屏：顶栏允许换行，语言贴纸独占一行也不挤导航 */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; }
  .topnav { flex-wrap: wrap; row-gap: var(--space-1); }
  /* 导航词只在链接之间换行，不允许「ホーム」这类词从中间断开 */
  .topnav a { white-space: nowrap; }
  .lang-switch { margin-left: 0; }
}

.page {
  max-width: var(--shell-max);
  min-height: calc(100vh - var(--space-10));
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-9);
}
.page-title {
  font-family: var(--font-marker);
  font-weight: normal;
  font-size: var(--text-3xl);
  margin: 0 0 var(--space-2);
  transform: rotate(-1deg);
}
.lede { font-family: var(--font-hand); font-size: var(--text-lg); color: var(--text-secondary); margin: 0 0 var(--space-5); }
.note { color: var(--text-tertiary); font-size: var(--text-xs); margin-top: var(--space-5); }

.section-label {
  display: inline-block;
  font-family: var(--font-marker);
  font-weight: normal;
  font-size: var(--text-xl);
  border-left: 5px solid var(--marker);
  padding: 0 0 0 var(--space-2);
  margin: var(--space-7) 0 var(--space-4);
  transform: rotate(-0.5deg);
}

.site-footer {
  margin: var(--space-6) var(--space-4) var(--space-4);
  padding: var(--space-5) var(--space-4);
  background: var(--paper-card);
  border: 2px solid var(--ink);
  border-top: 4px dashed var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper-sm);
  color: var(--text-secondary);
  text-align: center;
  font-family: var(--font-hand);
  font-size: var(--text-lg);
}

/* ---- 纸卡 / 面板 ---- */
.panel {
  position: relative;
  background: var(--paper-card);
  border: 2px solid var(--ink);
  border-radius: var(--radius-sketchy);
  box-shadow: var(--shadow-paper);
  padding: var(--space-5);
}

/* ---- 正文与列表（静态页公共提炼） ---- */
.prose p { margin: 0 0 var(--space-3); }
.prose p:last-child { margin-bottom: 0; }
.plain-list,
.rule-list,
.entry-points { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.plain-list { margin-bottom: 0; }
.plain-list li,
.rule-list li,
.entry-points li { margin-bottom: var(--space-1); }
.plain-list li:last-child,
.rule-list li:last-child,
.entry-points li:last-child { margin-bottom: 0; }
.plain-list li::marker,
.rule-list li::marker,
.entry-points li::marker { color: var(--marker); font-weight: var(--weight-bold); }
.entry-points { margin: 0; }
.term {
  font-family: var(--font-hand);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

/* ---- 工具条 ---- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--paper-card);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper-sm);
  transform: rotate(0.3deg);
}
.toolbar .count { color: var(--text-secondary); margin-left: auto; font-family: var(--font-hand); font-size: var(--text-base); }

/* ---- 便签 chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip {
  border: 2px solid var(--ink);
  background: var(--sticky-3);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper-sm);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  font-family: var(--font-hand);
  font-size: var(--text-lg);
  font-weight: bold;
  transition: transform var(--duration-1) ease, box-shadow var(--duration-1) ease;
}
.chip:nth-child(3n+1) { transform: rotate(-1deg); background: var(--sticky-1); }
.chip:nth-child(3n+2) { transform: rotate(0.8deg); background: var(--sticky-2); }
.chip:hover {
  color: var(--text-primary);
  transform: rotate(0) translate(-1px, -1px);
  box-shadow: var(--shadow-paper);
}
.chip.is-selected {
  color: var(--brand-ink);
  background: var(--brand);
  border-color: var(--ink);
  transform: rotate(0);
  box-shadow: var(--shadow-paper);
}
.chip .num { opacity: 0.7; margin-left: 4px; font-family: var(--font-sans); font-size: var(--text-xs); }

/* ---- 瀑布流与拍立得卡片 ---- */
.masonry { column-gap: var(--space-5); }
.masonry.cols-4 { column-count: 4; }
.masonry.cols-3 { column-count: 3; }
.masonry.cols-2 { column-count: 2; }
@media (max-width: 1080px) { .masonry.cols-4 { column-count: 3; } }
@media (max-width: 760px) { .masonry.cols-4, .masonry.cols-3 { column-count: 2; } .masonry.cols-2 { column-count: 1; } }

.card {
  break-inside: avoid;
  display: block;
  margin: 0 0 var(--space-5);
  padding: var(--space-2);
  background: var(--paper-card);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper);
  overflow: hidden;
  color: var(--text-primary);
  transition: transform var(--duration-2) ease, box-shadow var(--duration-2) ease;
}
.card:nth-child(3n+1) { transform: rotate(-1.2deg); }
.card:nth-child(3n+2) { transform: rotate(0.8deg); }
.card:nth-child(3n) { transform: rotate(-0.5deg); }
.card:hover {
  text-decoration: none;
  transform: rotate(0) translate(-2px, -3px);
  box-shadow: var(--shadow-paper-lg);
  z-index: 2;
}
.card-art {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-inset);
  border: 2px solid var(--ink);
  border-radius: var(--radius-xs);
}
.card-body { padding: var(--space-2) var(--space-1) var(--space-1); }
.card-title {
  font-family: var(--font-hand);
  font-size: var(--text-lg);
  font-weight: bold;
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-meta { color: var(--text-secondary); font-size: var(--text-xs); margin: 0; }
.card-tags { margin: var(--space-1) 0 0; color: var(--text-tertiary); font-family: var(--font-hand); font-size: var(--text-sm); }

/* ---- 纸面表单 ---- */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form-row { display: flex; flex-direction: column; gap: var(--space-1); }
.form-row label { font-family: var(--font-marker); font-weight: normal; font-size: var(--text-lg); }
.form-row .hint { color: var(--text-secondary); font-family: var(--font-hand); font-size: var(--text-sm); }
input[type="text"], input[type="email"], input[type="url"], select, textarea {
  font: inherit;
  color: var(--text-primary);
  background: var(--paper-card);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper-sm);
  padding: var(--space-2);
  min-height: var(--control-height);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--marker-soft);
  outline-offset: 1px;
}
textarea { min-height: 84px; resize: vertical; }
input:disabled, select:disabled, textarea:disabled {
  background: var(--bg-inset);
  color: var(--text-tertiary);
  box-shadow: none;
  cursor: not-allowed;
}
.checkbox-row { display: flex; gap: var(--space-2); align-items: flex-start; font-family: var(--font-hand); font-size: var(--text-base); }
.checkbox-row input { margin-top: 5px; width: 16px; height: 16px; accent-color: var(--brand); }
.checkbox-row input:disabled { cursor: not-allowed; }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ---- 纸片按钮 ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: inherit;
  font-weight: bold;
  border: 2px solid var(--ink);
  background: var(--paper-card);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper-sm);
  padding: var(--space-2) var(--space-4);
  min-height: var(--control-height);
  cursor: pointer;
  transition: transform var(--duration-1) ease, box-shadow var(--duration-1) ease;
}
.btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-paper);
  text-decoration: none;
}
.btn.primary { background: var(--brand); color: var(--brand-ink); }
.btn.quiet { border-color: transparent; box-shadow: none; color: var(--text-secondary); background: transparent; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: var(--shadow-paper-sm); }

/* ---- 其它 ---- */
.empty {
  border: 2px dashed var(--ink);
  border-radius: var(--radius-sketchy);
  padding: var(--space-8);
  text-align: center;
  color: var(--text-secondary);
  font-family: var(--font-hand);
  font-size: var(--text-lg);
  background: var(--paper-card);
}
.email-preview {
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--paper-card);
  background-image: repeating-linear-gradient(
    transparent,
    transparent 27px,
    var(--grid-line) 28px
  );
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper-sm);
  padding: var(--space-3);
  max-height: 340px;
  overflow: auto;
  margin: 0;
  font-family: var(--font-hand);
  font-size: var(--text-base);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---- 专题卡：一叠用胶带封起来的纸（首页轮播与 topics.html 瀑布流共用） ----
   ::before / ::after 是垫在后面的两张便签纸，.topic-sheet 才是最上面那张白纸。 */
.topic-card {
  position: relative;
  display: block;
  color: var(--text-primary);
  transition: transform var(--duration-2) ease;
}
.masonry .topic-card { break-inside: avoid; margin: var(--space-3) var(--space-2) var(--space-7); }
.topic-card::before,
.topic-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--sticky-1);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper-sm);
  transition: transform var(--duration-2) ease;
}
.topic-card::before { transform: rotate(3deg) translate(var(--space-1), var(--space-1)); }
.topic-card::after { background: var(--sticky-2); transform: rotate(-2deg) translate(calc(var(--space-1) * -1), var(--space-1)); }
.topic-card:nth-child(3n+1) { transform: rotate(-1deg); }
.topic-card:nth-child(3n+2) { transform: rotate(0.8deg); }
.topic-card:nth-child(3n) { transform: rotate(-0.4deg); }
.topic-card:hover { text-decoration: none; transform: rotate(0) translate(-2px, -3px); z-index: 2; }
.topic-card:hover::before { transform: rotate(5deg) translate(var(--space-2), var(--space-1)); }
.topic-card:hover::after { transform: rotate(-4deg) translate(calc(var(--space-2) * -1), var(--space-1)); }
.topic-card:focus-visible { outline: 3px solid var(--brand); outline-offset: var(--space-2); }
.topic-sheet {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-2);
  background: var(--paper-card);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper);
}
.topic-card:hover .topic-sheet { box-shadow: var(--shadow-paper-lg); }
.topic-sheet .tape-strip { width: var(--space-10); height: var(--space-5); }
.topic-card:nth-child(even) .topic-sheet .tape-strip { transform: rotate(4deg) translateX(-50%); }
/* 封面：轮播里统一 4:3 让一排对齐；瀑布流里保留原图比例，高低错落 */
.topic-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bg-inset);
  border: 2px solid var(--ink);
  border-radius: var(--radius-xs);
}
.masonry .topic-cover { aspect-ratio: auto; }
.topic-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-1);
  margin-top: var(--space-1);
}
.topic-thumbs img,
.topic-thumbs .topic-more {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--bg-inset);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-xs);
}
.topic-thumbs .topic-more {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  font-family: var(--font-hand);
  font-size: var(--text-base);
  font-weight: bold;
}
.topic-body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-1) var(--space-1); }
.topic-head { display: flex; align-items: flex-start; gap: var(--space-2); }
.topic-name {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-marker);
  font-size: var(--text-xl);
  font-weight: normal;
  line-height: var(--leading-tight);
}
.topic-count {
  flex: none;
  padding: 0 var(--space-2);
  background: var(--sticky-1);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-hand);
  font-size: var(--text-sm);
  font-weight: bold;
  line-height: 1.6;
  transform: rotate(2deg);
}
.topic-summary {
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--font-hand);
  font-size: var(--text-base);
}
.topic-rail .topic-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}