/* 阅读人格 /weread：编辑设计风。作用域 .wr-poetry。
 * 调色板、字体栈、.btn / .step-tag / .img-modal 由 Base.astro 的全局样式提供，
 * 这里不再自建一套 --xuan/--mo/--zhusha 的平行命名。 */
.wr-poetry {
  color: var(--ink);
  font-family: var(--sans);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.wr-poetry .wr-hero {
  text-align: center;
  padding: 32px 0 6px;
}
.wr-poetry .wr-hero h1 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(36px, 9vw, 48px);
  letter-spacing: 0.1em;
  line-height: 1.3;
}
.wr-poetry .wr-hero h1 .u {
  color: var(--seal);
}
.wr-poetry .wr-hero .lede {
  margin: 14px auto 0;
  max-width: 24em;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.wr-poetry .wr-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 22px 20px;
  margin-top: 20px;
}
.wr-poetry .wr-card h2 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.wr-poetry .wr-card h2 .dot {
  color: var(--seal);
  margin-right: 10px;
  font-size: 14px;
}
.wr-poetry .wr-facts {
  list-style: none;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.wr-poetry .wr-facts li {
  margin: 8px 0;
  padding-left: 18px;
  position: relative;
}
.wr-poetry .wr-facts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 6px;
  height: 6px;
  background: var(--seal);
}
/* ---------- 开始页 ---------- */
.wr-poetry .wr-start {
  max-width: 600px;
  margin: 26px auto 0;
}
.wr-poetry .wr-keyrow {
  display: flex;
  gap: 10px;
}
.wr-poetry .wr-keyrow input {
  flex: 1;
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  min-width: 0;
}
.wr-poetry .wr-keyrow .btn {
  flex: none;
  white-space: nowrap;
}
.wr-poetry .wr-start-links {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.wr-poetry .wr-start-links a,
.wr-poetry .wr-linkish {
  font-size: 14px;
  color: var(--seal);
  font-weight: 700;
}
/* 长得像链接的按钮：它开的是弹窗不是新页面，用 button 才对得上语义 */
.wr-poetry .wr-linkish {
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* ---------- API Key 引导弹窗 ---------- */
.wr-help {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(25, 23, 19, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.wr-help-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 26px 24px 22px;
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  overflow: auto;
}
.wr-help-card h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.wr-help-steps {
  list-style: none;
  counter-reset: step;
  margin: 6px 0 0;
}
.wr-help-steps li {
  counter-increment: step;
  position: relative;
  padding: 14px 0 14px 40px;
  border-bottom: 1px solid var(--line-soft);
}
.wr-help-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 15px;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 15px;
  color: var(--seal);
}
.wr-help-steps b {
  display: block;
  font-size: 15px;
  font-weight: 700;
}
.wr-help-steps span {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.wr-help-alt {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.wr-help-alt a {
  color: var(--seal);
  font-weight: 700;
}
.wr-help-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.wr-help .wr-actions .btn {
  width: 100%;
}
.wr-poetry .wr-footnote {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.wr-poetry .wr-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.wr-poetry .wr-actions .btn {
  font-size: 13px;
  padding: 10px 16px;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
}
.wr-poetry .wr-hint {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.wr-poetry .wr-hint a {
  color: var(--seal);
  font-weight: 700;
}
.wr-poetry .wr-err {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--paper);
  background: var(--seal);
  padding: 12px 16px;
}
/* 品类徽章跟着人格走，不放在分享区 */
.wr-poetry #wr-badge {
  margin: 18px 0 0;
}
#wr-poster {
  margin-top: 14px;
}
.wr-poetry .wr-mocktag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  border: 1px solid var(--ink-soft);
  padding: 4px 12px;
  margin-bottom: 14px;
}
/* ---------- 进度 ---------- */
.wr-poetry .wr-steps {
  list-style: none;
  margin-top: 6px;
}
.wr-poetry .wr-steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  font-size: 15px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
}
.wr-poetry .wr-steps li:last-child {
  border-bottom: 0;
}
.wr-poetry .wr-steps .st {
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.wr-poetry .wr-steps li.doing {
  color: var(--ink);
  font-weight: 700;
}
.wr-poetry .wr-steps li.doing .st {
  background: var(--seal);
  border-color: var(--seal);
  color: var(--paper);
}
.wr-poetry .wr-steps li.done {
  color: var(--ink);
}
.wr-poetry .wr-steps li.done .st {
  background: var(--ink);
  color: var(--paper);
}
/* ---------- 结果 ---------- */
.wr-poetry .wr-beat {
  margin-top: 34px;
}
.wr-poetry .wr-beat .label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-indent: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.wr-poetry .wr-beat .label::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
  opacity: 0.35;
}
/* 没有标签的小节：用一条发丝线接住上一段，不然会和上面糊在一起 */
.wr-poetry .wr-beat-plain {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
#wr-poster {
  margin-top: 0;
}
/* 眉题：人格色小字，左右发丝线 */
.wr-poetry .wr-kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 26px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  white-space: nowrap;
}
.wr-poetry .wr-kicker::before,
.wr-poetry .wr-kicker::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line-soft);
}
.wr-poetry .wr-persona-name {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(54px, 16vw, 84px);
  letter-spacing: 0.12em;
  text-indent: 0.06em;
  text-align: center;
  padding: 10px 0 18px;
  line-height: 1.2;
}
/* deck：tagline 上下规则线 */
.wr-poetry .wr-tagline {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.9;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 12px;
  margin: 0 auto;
  max-width: 34em;
}
/* 判词：正文 + 首字下沉 */
.wr-poetry .wr-judgement {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 2.1;
  margin-top: 16px;
}
.wr-poetry .wr-judgement::first-letter {
  font-size: 3em;
  font-weight: 900;
  float: left;
  line-height: 1.05;
  padding: 4px 10px 0 0;
  color: var(--seal);
}
/* 四轴：靠编号和留白分行，不再一行一条线。
   原来这里叠了八条横线——tagline 上下两条、这块自己一条顶线、四行各一条底线，
   再加下面标签那条。tagline 的底线和这块的顶线中间只隔个空隙，同一个分隔画了两遍；
   而左边 01–04 的大字加圈出来的那一极，本来就把行分得很清楚了。 */
.wr-poetry .wr-axes {
  margin-top: 26px;
}
.wr-poetry .wr-axis {
  display: flex;
  gap: 18px;
  padding: 20px 2px;
}
.wr-poetry .wr-axis .ax-meta {
  flex: none;
  width: 46px;
}
.wr-poetry .wr-axis .ax-no {
  display: block;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.2;
}
.wr-poetry .wr-axis .ax-body {
  flex: 1;
  min-width: 0;
}
.wr-poetry .wr-axis .poles {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wr-poetry .wr-axis .pole {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 700;
  color: var(--ink-soft);
  opacity: 0.42;
  padding: 2px 18px;
  letter-spacing: 0.08em;
}
/* 命中的一极：手写笔触圈出来 */
.wr-poetry .wr-axis .pole.on {
  color: var(--ink);
  opacity: 1;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20220%2096%22%3E%3Cpath%20d%3D%22M210.8%2C48.0L209.3%2C51.3L207.3%2C54.5L204.9%2C57.7L202.1%2C60.7L198.9%2C63.8L195.1%2C66.7L190.6%2C69.4L185.5%2C72.1L179.6%2C74.5L173.2%2C76.6L166.3%2C78.5L158.9%2C80.2L151.3%2C81.7L143.5%2C82.9L135.4%2C84.1L127.2%2C85.1L118.7%2C85.9L110.0%2C86.5L101.0%2C86.9L92.0%2C86.9L82.9%2C86.4L74.0%2C85.5L65.6%2C84.1L57.9%2C82.3L51.0%2C80.0L44.9%2C77.5L39.6%2C74.7L35.1%2C71.9L31.0%2C69.0L27.4%2C66.1L23.9%2C63.3L20.6%2C60.4L17.5%2C57.4L14.7%2C54.4L12.4%2C51.2L10.8%2C48.0L10.0%2C44.7L10.4%2C41.3L11.8%2C38.0L14.2%2C34.8L17.6%2C31.6L21.9%2C28.7L26.8%2C25.9L32.2%2C23.2L38.2%2C20.7L44.6%2C18.4L51.5%2C16.3L58.9%2C14.4L66.8%2C12.8L75.1%2C11.5L83.7%2C10.7L92.5%2C10.2L101.3%2C10.2L110.0%2C10.5L118.5%2C11.2L126.7%2C12.0L134.7%2C13.0L142.4%2C14.1L150.2%2C15.3L157.9%2C16.5L165.7%2C17.8L173.4%2C19.3L181.0%2C21.0L188.3%2C23.0L194.9%2C25.4L200.6%2C28.1L205.2%2C31.1L208.5%2C34.4L210.7%2C37.7L211.6%2C41.2L211.6%2C44.6L210.8%2C48.0Z%22%20fill%3D%22none%22%20stroke%3D%22%231B1815%22%20stroke-width%3D%2210%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.28%22%2F%3E%3Cpath%20d%3D%22M213.7%2C48.0L214.2%2C51.5L213.5%2C54.9L211.3%2C58.3L207.9%2C61.5L203.5%2C64.6L198.3%2C67.4L192.5%2C69.9L186.3%2C72.3L179.8%2C74.5L173.1%2C76.6L166.2%2C78.5L159.0%2C80.2L151.5%2C81.8L143.6%2C83.1L135.5%2C84.1L127.1%2C84.9L118.6%2C85.2L110.0%2C85.3L101.5%2C85.1L93.0%2C84.6L84.6%2C84.0L76.3%2C83.1L68.1%2C82.2L59.9%2C81.0L51.8%2C79.6L44.0%2C77.9L36.5%2C75.9L29.8%2C73.6L23.9%2C70.9L19.2%2C67.9L15.6%2C64.7L13.4%2C61.4L12.2%2C58.0L12.1%2C54.6L12.6%2C51.2L13.7%2C48.0L15.0%2C44.8L16.5%2C41.7L18.1%2C38.6L20.0%2C35.6L22.3%2C32.5L25.1%2C29.4L28.6%2C26.4L33.1%2C23.5L38.4%2C20.8L44.5%2C18.4L51.5%2C16.2L59.0%2C14.4L67.0%2C12.9L75.2%2C11.7L83.7%2C10.7L92.4%2C10.0L101.1%2C9.5L110.0%2C9.3L118.9%2C9.4L127.7%2C9.8L136.4%2C10.6L144.7%2C11.7L152.6%2C13.3L159.9%2C15.2L166.5%2C17.3L172.5%2C19.7L177.9%2C22.2L183.0%2C24.7L187.7%2C27.3L192.4%2C29.9L196.9%2C32.6L201.3%2C35.4L205.4%2C38.3L209.0%2C41.4L211.9%2C44.6L213.7%2C48.0Z%22%20fill%3D%22none%22%20stroke%3D%22%231B1815%22%20stroke-width%3D%224.5%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.9%22%2F%3E%3C%2Fsvg%3E") no-repeat center / 100% 100%;
}
.wr-poetry .wr-axis .vs {
  color: var(--line-soft);
}
.wr-poetry .wr-axis .why {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 8px;
  line-height: 1.8;
}
/* 下一本：双线框 */
#wr-next-beat .wr-card {
  border: 4px double var(--line);
}
/* 左图右文，和分享海报里的「下一本」同一个构图 */
.wr-poetry .wr-next-one {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 4px 0;
}
.wr-poetry .wr-next-one img {
  /* 取的是 t9_ 大图（428×616），110px 显示在 3 倍屏上仍有余量 */
  flex: none;
  width: 110px;
  height: auto;
  border: 1px solid var(--line);
  display: block;
}
.wr-poetry .wr-next-text {
  flex: 1;
  min-width: 0;
}
.wr-poetry .wr-next-one .t {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.wr-poetry .wr-next-one .a {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
  line-height: 1.6;
}
.wr-poetry .wr-next-one .why {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 10px;
  letter-spacing: 0.05em;
  line-height: 1.7;
}
@media (max-width: 380px) {
  .wr-poetry .wr-next-one {
    gap: 14px;
  }
  .wr-poetry .wr-next-one img {
    width: 92px;
  }
}
@media (max-width: 420px) {
  .wr-poetry .wr-axis .pole {
    font-size: 20px;
    padding: 2px 12px;
  }
}