/* 小红楼论坛 · 名单册版式
   全站唯一视觉来源：下列 token。组件规则只引用 token，不写散值。 */

:root{
  --bg:#f8f6f1;
  --surface:#ffffff;
  --surface-2:#eeece5;
  --surface-3:#e2dfd5;
  --text:#1b1d1c;
  --text-muted:#5b615e;
  --pine:#23544a;
  --pine-ink:#ffffff;
  --pine-soft:#e6edea;
  --tile:#a34a24;
  --tile-deep:#8b3d1c;
  --tile-ink:#fdf6ef;
  --tile-quiet:#d9b6a0;
  --border:#ddd9cf;
  --border-strong:#bcb6a8;
  --ring:#23544a;
  --ok:#2b6a44;
  --warn:#8a5a12;
  --danger:#a33325;
  --info:#23544a;

  --font-head:"KaiTi","STKaiti","Kaiti SC","楷体","Songti SC","SimSun",serif;
  --font-body:"Songti SC","SimSun","Source Han Serif SC","Noto Han Serif SC",serif;
  --font-mono:"Cascadia Mono","JetBrains Mono",Consolas,"Courier New",monospace;

  --fs-h1:33px;
  --fs-h2:23px;
  --fs-h3:18px;
  --fs-body:17px;
  --fs-small:14px;
  --fs-micro:12px;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;

  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;

  --shadow-1:0 1px 0 rgba(27,29,28,.05);
  --shadow-2:0 -6px 20px -14px rgba(27,29,28,.34);
  --shadow-3:0 -12px 30px -16px rgba(27,29,28,.46);

  --container:730px;
  --container-wide:1120px;
  --bp-wide:1120px;
  --bp-narrow:700px;

  --ease:cubic-bezier(.2,.7,.3,1);
  --dur:150ms;
  --dur-slow:220ms;

  --cta-loop:2.9s;
  --cta-ease:cubic-bezier(.2,.7,.3,1);
  --cta-reserve:108px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  padding-bottom:var(--cta-reserve);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.8;
  color:var(--text);
  background:var(--bg);
  overflow-wrap:anywhere;
  text-underline-offset:.18em;
}

img{max-width:100%;height:auto}

h1{
  font-family:var(--font-head);
  font-size:33px;
  line-height:1.26;
  font-weight:700;
  margin:0 0 var(--space-4);
}

h2{
  font-family:var(--font-head);
  font-size:23px;
  line-height:1.34;
  font-weight:700;
  margin:0 0 var(--space-5);
}

h3{
  font-family:var(--font-head);
  font-size:18px;
  line-height:1.45;
  font-weight:700;
  margin:0 0 var(--space-2);
}

p{margin:0 0 var(--space-4)}

a{color:var(--pine)}
a:hover{color:var(--text)}
a:focus-visible,summary:focus-visible,button:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
}

ul,ol{margin:0 0 var(--space-4);padding-inline-start:var(--space-5)}
li{margin:0 0 var(--space-1)}

.wrap{width:100%;max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--space-4)}

.col{max-width:var(--container)}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:normal;
}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--surface);
  color:var(--pine);
  padding:var(--space-2) var(--space-4);
  z-index:90;
}
.skip:focus{left:var(--space-4);top:var(--space-1)}

/* ---------------------------------------------------------------- 顶线 */

.top{
  position:sticky;
  top:0;
  z-index:30;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}

.top__row{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  min-height:52px;
  padding-block:var(--space-2);
}

.top__brand{display:flex;flex:0 0 auto;align-items:center;text-decoration:none}

.top__logo{display:block;width:154px;height:30px;object-fit:contain}

.top__strip{display:none}

.top__drawer{margin-inline-start:auto}

.drawer__btn{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  min-height:44px;
  padding:0 var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--pine);
  font-family:var(--font-body);
  font-size:var(--fs-small);
  cursor:pointer;
  list-style:none;
}
.drawer__btn::-webkit-details-marker{display:none}
.drawer__btn::after{content:"▾";font-size:var(--fs-micro)}
.drawer[open] .drawer__btn{background:var(--surface-2);color:var(--pine)}

.drawer__panel{
  position:absolute;
  inset-inline-end:var(--space-4);
  top:calc(100% + var(--space-2));
  width:min(760px,calc(100vw - 32px));
  max-height:70vh;
  overflow:auto;
  padding:var(--space-4);
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-2);
  z-index:40;
}

.drawer__grp + .drawer__grp{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border)}

.drawer__h{
  margin:0 0 var(--space-2);
  font-family:var(--font-head);
  font-size:var(--fs-small);
  font-weight:700;
  color:var(--tile);
}

.drawer__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-1);
  margin:0;
  padding:0;
  list-style:none;
}
.drawer__grid a{
  display:block;
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text);
  font-size:var(--fs-small);
  text-decoration:none;
}
.drawer__grid a:hover{background:var(--pine-soft);color:var(--pine)}

/* ---------------------------------------------------------------- 槽位 */

.sec{padding-block:var(--space-6)}
.sec + .sec{border-top:1px solid var(--border)}
.sec--wide{padding-block:var(--space-7)}

.rail{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin:0;
  padding:0;
  list-style:none;
}

.slot{
  display:inline-flex;
  align-items:stretch;
  min-height:44px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
}
.slot__k{
  display:flex;
  align-items:center;
  padding:0 var(--space-2);
  background:var(--surface-2);
  color:var(--text-muted);
  font-size:var(--fs-micro);
}
.slot__v{
  display:flex;
  align-items:center;
  padding:0 var(--space-3);
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-small);
}
.slot:hover{border-color:var(--pine)}
.slot:hover .slot__v{color:var(--pine)}

.tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-4) 0 0;padding:0;list-style:none}
.tags a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--pine);
  font-size:var(--fs-small);
  text-decoration:none;
}
.tags a:hover{background:var(--pine-soft);color:var(--text)}

.lede{
  max-width:var(--container);
  margin:var(--space-4) 0 0;
  color:var(--text);
}

.kicker{
  margin:0 0 var(--space-2);
  font-size:var(--fs-micro);
  color:var(--text-muted);
}

.readout{
  display:grid;
  gap:var(--space-4);
  margin:var(--space-5) 0 0;
  padding:var(--space-4);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.readout__item{min-width:0}
.readout__n{
  display:block;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-h2);
  line-height:1.2;
  color:var(--pine);
}
.readout__k{display:block;font-size:var(--fs-small);color:var(--tile)}
.readout__d{margin:var(--space-1) 0 0;font-size:var(--fs-small);color:var(--text-muted)}

/* ------------------------------------------------------------ 示例帖子 */

.spec{
  margin:var(--space-5) 0 0;
  padding:var(--space-4);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
}

.spec__row{
  margin:var(--space-2) 0 var(--space-4);
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  color:var(--text-muted);
}

.spec__legend{padding:0 var(--space-2);font-size:var(--fs-small);color:var(--text-muted)}

.spec__line{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}

.fld{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  min-height:44px;
  padding:0 var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  cursor:pointer;
  font-size:var(--fs-small);
}
.fld__k{color:var(--text-muted);font-size:var(--fs-micro)}
.fld__v{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.fld input{
  appearance:none;
  flex:0 0 auto;
  width:11px;
  height:13px;
  margin:0;
  border:1px solid var(--border-strong);
  border-radius:2px;
  background:var(--surface-2);
  cursor:pointer;
}
.fld input:checked{background:var(--tile);border-color:var(--tile)}
.fld:hover{background:var(--surface-2)}
.fld:has(input:checked){
  border-color:var(--tile);
  color:var(--tile);
  box-shadow:inset 0 -2px 0 var(--tile);
}
.fld:has(input:focus-visible){outline:2px solid var(--ring);outline-offset:2px}

.spec__panels{margin-top:var(--space-4)}

.spec__panel{
  display:none;
  margin:0;
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg);
}
.spec__panel p{margin:0}
.spec:has(input[value="bracket"]:checked) .spec__panel[data-panel="bracket"]{display:block}
.spec:has(input[value="title"]:checked) .spec__panel[data-panel="title"]{display:block}
.spec:has(input[value="tag"]:checked) .spec__panel[data-panel="tag"]{display:block}
.spec:has(input[value="group"]:checked) .spec__panel[data-panel="group"]{display:block}
.spec:has(input[value="digest"]:checked) .spec__panel[data-panel="digest"]{display:block}
.spec:has(input[value="hot"]:checked) .spec__panel[data-panel="hot"]{display:block}
.spec:has(input[value="reply"]:checked) .spec__panel[data-panel="reply"]{display:block}
.spec:has(input[value="date"]:checked) .spec__panel[data-panel="date"]{display:block}

@supports not (selector(:has(*))){
  .spec__panel{display:block}
  .spec__panel + .spec__panel{margin-top:var(--space-2)}
}

/* ---------------------------------------------------------------- 表格 */

.sheet__scroll{
  max-width:100%;
  overflow-x:auto;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  background:var(--surface);
}

.sheet{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:var(--fs-small);
}
.sheet th,.sheet td{
  padding:var(--space-2) var(--space-3);
  border-bottom:1px solid var(--border);
  text-align:start;
  vertical-align:top;
}
.sheet thead th{
  background:var(--surface-2);
  color:var(--pine);
  font-weight:700;
  font-size:var(--fs-micro);
  letter-spacing:.04em;
  white-space:nowrap;
}
.sheet tbody tr:last-child th,.sheet tbody tr:last-child td{border-bottom:0}
.sheet tbody th{font-weight:400}
.sheet__num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}

.sheet th[data-sort]{cursor:pointer;user-select:none}
.sheet th[data-sort]::after{content:" ↕";color:var(--text-muted)}
.sheet th[data-sort][aria-sort="ascending"]::after{content:" ↑";color:var(--tile)}
.sheet th[data-sort][aria-sort="descending"]::after{content:" ↓";color:var(--tile)}
.sheet th[data-sort][aria-disabled="true"]{cursor:default;color:var(--text-muted)}
.sheet th[data-sort][aria-disabled="true"]::after{content:""}

tr.is-hidden{display:none}

/* ---------------------------------------------------------------- 筛选 */

.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-4);padding:0;list-style:none}

.chip{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  min-height:44px;
  padding:0 var(--space-3);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--pine);
  font-family:var(--font-body);
  font-size:var(--fs-small);
  cursor:pointer;
}
.chip:hover{background:var(--pine-soft)}
.chip[aria-pressed="true"]{background:var(--pine);color:var(--pine-ink);border-color:var(--pine)}
.chip__n{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-micro);
  color:var(--text-muted);
}
.chip[aria-pressed="true"] .chip__n{color:var(--pine-ink)}

.count{
  margin:0 0 var(--space-3);
  font-size:var(--fs-small);
  color:var(--text-muted);
}

/* ------------------------------------------------------------ 档位/术语 */

.tiers{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none}

.tier{
  padding:var(--space-4);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
}
.tier__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3)}
.tier__name{font-family:var(--font-head);font-size:var(--fs-h3);font-weight:700}
.tier__param{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--tile)}
.tier__state{font-size:var(--fs-micro);color:var(--text-muted)}
.tier p{margin:var(--space-2) 0 0}

.terms{
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  border-top:1px solid var(--border);
}
.term{padding:var(--space-3) 0;border-bottom:1px solid var(--border)}
.term__t{
  margin:0;
  font-family:var(--font-head);
  font-size:var(--fs-h3);
  font-weight:700;
}
.term__m{margin:var(--space-1) 0 0;font-size:var(--fs-small);color:var(--tile)}
.term__d{margin:var(--space-1) 0 0;font-size:var(--fs-small);color:var(--text-muted)}

.grouphead{
  margin:var(--space-6) 0 var(--space-3);
  font-size:var(--fs-small);
  color:var(--tile);
}

/* ---------------------------------------------------------------- FAQ */

.faq{margin:0;border-top:1px solid var(--border)}
.faq + .faq{border-top:0}

.faq__q{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  min-height:44px;
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--border);
  background:var(--surface);
  font-family:var(--font-head);
  font-size:var(--fs-h3);
  font-weight:700;
  cursor:pointer;
  list-style:none;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::before{content:"＋";color:var(--tile);font-size:var(--fs-small)}
.faq[open] .faq__q{background:var(--surface-2);color:var(--pine)}
.faq[open] .faq__q::before{content:"－"}

.faq__a{
  margin:0;
  padding:var(--space-3) var(--space-4) var(--space-4);
  border-bottom:1px solid var(--border);
  font-size:var(--fs-small);
}

/* ---------------------------------------------------------------- 内链 */

.links{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}

.links a{
  display:block;
  height:100%;
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
}
.links a:hover{background:var(--pine-soft)}
.links__t{
  display:block;
  font-family:var(--font-head);
  font-size:var(--fs-h3);
  font-weight:700;
  color:var(--pine);
}
.links__d{display:block;font-size:var(--fs-small);color:var(--text-muted)}

/* ---------------------------------------------------------------- 页脚 */

.foot{
  margin-top:var(--space-7);
  padding-block:var(--space-6) var(--space-5);
  border-top:1px solid var(--border-strong);
  background:var(--surface);
}

.foot__grid{display:grid;gap:var(--space-5)}
.foot__col ul{display:grid;gap:var(--space-1);margin:0;padding:0;list-style:none}
.foot__col a{font-size:var(--fs-small);text-decoration:none}
.foot__h{
  margin:0 0 var(--space-2);
  font-family:var(--font-head);
  font-size:var(--fs-small);
  font-weight:700;
  color:var(--tile);
}

.foot__brand{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--space-3);
  margin-top:var(--space-6);
  padding-top:var(--space-4);
  border-top:1px solid var(--border);
}
.foot__brandlink{
  font-family:var(--font-head);
  font-size:var(--fs-h3);
  font-weight:700;
  color:var(--pine);
  text-decoration:none;
}
.foot__note{margin:0;font-size:var(--fs-micro);color:var(--text-muted)}

/* ------------------------------------------------------------ 寻芳 CTA */

.site-cta{
  position:fixed;
  left:50%;
  bottom:0;
  z-index:60;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  width:min(520px,calc(100% - 32px));
  min-height:52px;
  margin-bottom:var(--space-3);
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-md);
  background:var(--tile);
  color:var(--tile-ink);
  box-shadow:var(--shadow-3);
  text-align:center;
  text-decoration:none;
  font-size:var(--fs-body);
  transition:background-color var(--dur) var(--ease);
}
.site-cta:hover{background:var(--tile-deep);color:var(--tile-ink)}
.site-cta:active{background:var(--tile-deep)}

.site-cta__slot{
  position:relative;
  flex:0 0 auto;
  width:10px;
  height:12px;
  border:1px solid var(--border);
  border-radius:2px;
  background:var(--tile-ink);
  overflow:hidden;
  animation:cta-slot-warm var(--cta-loop) var(--cta-ease) infinite;
}

.site-cta__slot::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--tile-quiet);
  transform:translateY(100%);
  animation:cta-slot-fill var(--cta-loop) var(--cta-ease) infinite;
}

.site-cta__text{min-width:0}

@keyframes cta-slot-fill{
  0%,40%{
    transform:translateY(100%);
    background:var(--tile-quiet);
  }
  55%{
    transform:translateY(45%);
    background:var(--tile-quiet);
  }
  70%{
    transform:translateY(0);
    background:var(--tile-quiet);
  }
  84%,100%{
    transform:translateY(0);
    background:var(--tile);
  }
}

/* 同一条时间线上的第二个通道：描边由中性线转暖，与填充一起到位 */
@keyframes cta-slot-warm{
  0%,40%{
    border-color:var(--border);
  }
  70%{
    border-color:var(--border-strong);
  }
  84%,100%{
    border-color:var(--tile-quiet);
  }
}

/* ------------------------------------------------------------ 断点 */

@media (min-width:700px){
  .wrap{padding-inline:var(--space-5)}
  .readout{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .term{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 var(--space-4)}
  .term__m,.term__d{margin-top:0}
  .term__t{margin-top:0}
  .term__m{grid-column:2}
  .term__d{grid-column:2}
}

@media (min-width:1120px){
  .top__strip{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-4);
    margin-inline-start:auto;
    font-size:var(--fs-small);
  }
  .top__strip a{
    color:var(--pine);
    text-decoration:none;
    padding-block:var(--space-1);
    border-bottom:1px solid transparent;
  }
  .top__strip a:hover{color:var(--text);border-bottom-color:var(--pine)}
  .top__drawer{margin-inline-start:0}
  .drawer__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .foot__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .site-cta{width:min(520px,calc(100% - 32px))}
}

@media (max-width:699px){
  :root{--cta-reserve:124px}

  .drawer__panel{
    position:fixed;
    inset-inline:var(--space-4);
    top:auto;
    bottom:calc(80px + env(safe-area-inset-bottom));
    width:auto;
    max-height:56vh;
  }
  .drawer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .top__logo{width:138px;height:27px}

  .sheet thead th[data-col="note"],
  .sheet tbody td[data-col="note"]{display:none}
  .sheet{min-width:0}

  .site-cta{
    width:calc(100% - 32px);
    margin-bottom:calc(var(--space-3) + env(safe-area-inset-bottom));
  }
  .site-cta__slot{width:9px;height:11px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .site-cta__slot{
    animation:none;
    border-color:var(--tile-quiet);
  }
  .site-cta__slot::after{
    animation:none;
    transform:translateY(0);
    background:var(--tile);
  }
}