/* ============================================================
   /fortune/iching/ —— 只有这一页用的样式，前缀 ich-
   ------------------------------------------------------------
   卦画不用 unicode 的 ䷀ 那一段字符：那段字在不少手机上是空框。
   六条爻全部拿 div 画出来 —— 一根实线是阳，中间断开是阴，
   正好落在这个站「刻线制图纸」的语汇里，而且零图片零字体。
   朱红（--accent）整页只给「动爻」用，这是此刻真正在变的那几条。
   序号和刻度用赭石（--accent-soft），跟站里其他页一致。
   ============================================================ */

/* ---------- 起卦台 ---------- */

/* 结果区是 .doc 的一个直接子元素，里面的东西就拿不到 .doc 那一层的 gap，
   不补这一条，上一节的正文会和下一节的标题贴死。
   卦画、卦号、分享链接是同一组，挨紧；下面三节各自独立，补回大间距。 */
#ich-result { display: grid; gap: var(--sp-4); }
#ich-result > .block { margin-top: var(--sp-6); }

.ich-stage {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-6) 0;
  margin-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 46rem) {
  .ich-stage {
    grid-template-columns: 13rem minmax(0, 1fr);
    column-gap: var(--sp-7);
  }
  .ich-fig { grid-row: 1 / span 2; }
  .ich-then { align-self: end; }
}

/* ---------- 六条爻 ---------- */

.ich-fig {
  display: flex;
  flex-direction: column-reverse;   /* 自下而上：第一爻在最底下 */
  gap: var(--sp-3);
  width: 100%;
  max-width: 13rem;
}

.ich-ln {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) 2.4rem;
  align-items: center;
  gap: var(--sp-2);
}

.ich-pos {
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--faint);
  text-align: right;
}

.ich-stick { display: flex; gap: 0; height: 11px; }
.ich-ln[data-y="0"] .ich-stick { gap: 22%; }
.ich-stick i { flex: 1; background: var(--ink); }

.ich-num {
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--accent-soft);
  letter-spacing: .04em;
}
.ich-num b { font-weight: 400; }

/* 动爻：下面压一道朱红的线，像账本上被划出来的那一行。
   整根爻不染红 —— 四条爻都在动的时候会红成一片。 */
.ich-ln[data-move] .ich-stick { position: relative; }
.ich-ln[data-move] .ich-stick::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--accent);
}
.ich-ln[data-move] .ich-num { color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .ich-stick i {
    transform: scaleX(0);
    animation: ich-draw 380ms var(--ease) forwards;
    animation-delay: calc(var(--_i) * 150ms);
  }
  .ich-stick i:first-child { transform-origin: left; }
  .ich-stick i:last-child { transform-origin: right; }
  .ich-ln[data-move] .ich-stick::after {
    transform: scaleX(0);
    transform-origin: left;
    animation: ich-draw 300ms var(--ease) forwards;
    animation-delay: calc(var(--_i) * 150ms + 1000ms);
  }
}
@keyframes ich-draw { to { transform: scaleX(1); } }

/* ---------- 卦名牌 ---------- */

.ich-plate { display: grid; gap: var(--sp-2); justify-items: start; }

.ich-no {
  margin: 0;
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.ich-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1.1;
  text-wrap: balance;
}
.ich-name span { margin-right: .35em; }
.ich-name em { font-style: italic; color: var(--muted); }

.ich-py { margin: 0; font-size: var(--step--1); color: var(--faint); letter-spacing: .06em; }

.ich-tri { margin: 0; font-size: var(--step--1); color: var(--muted); }

.ich-mine {
  margin: var(--sp-2) 0 0;
  max-width: var(--measure);
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--muted);
  border-left: 1px solid var(--rule);
  padding-left: var(--sp-3);
}
.ich-mine b { font-weight: 400; color: var(--accent-soft); letter-spacing: .08em;
  text-transform: uppercase; font-size: .84em; display: block; margin-bottom: 2px; }

/* ---------- 变卦 ---------- */

.ich-then {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--rule);
}
.ich-then[hidden] { display: none; }
.ich-then .icon { color: var(--accent-soft); flex: none; }
.ich-then .ich-no { font-size: var(--step--1); }
.ich-then h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-1);
}
.ich-then h3 em { font-style: italic; color: var(--muted); }

/* 小卦画：六条短线，表格和变卦处共用 */
.ich-mini { display: flex; flex-direction: column-reverse; gap: 2px; width: 1.55rem; flex: none; }
.ich-mini u { display: flex; gap: 0; height: 2px; text-decoration: none; }
.ich-mini u i { flex: 1; background: var(--ink); }
.ich-mini u[data-y="0"] { gap: 26%; }

/* ---------- 卦号 / 分享 ---------- */

.ich-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}
.ich-cut {
  margin: 0;
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.ich-cut b {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  letter-spacing: .14em;
}

.ich-share { display: grid; gap: var(--sp-2); max-width: 30rem; }
.ich-share label {
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.ich-share input {
  width: 100%;
  font: inherit;
  font-size: var(--step--1);
  color: var(--muted);
  background: var(--raise);
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  padding: var(--sp-2) var(--sp-3);
}
.ich-share input:focus { outline: 0; border-color: var(--accent); color: var(--ink); }

/* ---------- 读哪一条 ---------- */

.ich-rule {
  max-width: var(--measure);
  border-left: 2px solid var(--accent-soft);
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
}
.ich-rule b { display: block; font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-1); margin-bottom: var(--sp-2); }
.ich-rule p { margin: 0; font-size: var(--step--1); color: var(--muted); line-height: 1.65; }

.ich-quote { display: grid; gap: var(--sp-5); margin-top: var(--sp-5); }

.ich-q { margin: 0; max-width: var(--measure); display: grid; gap: var(--sp-2); }
.ich-q cite {
  font-style: normal;
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-soft);
  order: -1;
}
.ich-q[data-move] cite { color: var(--accent); }
.ich-cn {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.75;
  letter-spacing: .06em;
}
.ich-en { margin: 0; font-size: var(--step-1); line-height: 1.6; color: var(--muted); }

/* ---------- 六爻全文 ---------- */

.ich-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ich-lines li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--rule);
}
.ich-lines li:last-child { border-bottom: 1px solid var(--rule); }
.ich-lines li[data-move] { background: var(--raise); }

.ich-tag { display: grid; gap: 2px; justify-items: center; }
.ich-tag u {
  display: flex; gap: 0; width: 100%; height: 5px; text-decoration: none;
}
.ich-tag u i { flex: 1; background: var(--ink); }
.ich-tag[data-y="0"] u { gap: 24%; }
.ich-tag b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--faint);
}
.ich-lines li[data-move] .ich-tag b { color: var(--accent); }
.ich-lines li[data-move] .ich-tag u i { background: var(--accent); }

.ich-lines .ich-cn { font-size: var(--step-1); }
.ich-lines .ich-en { font-size: var(--step--1); line-height: 1.7; }
.ich-lines .ich-body { display: grid; gap: var(--sp-2); min-width: 0; }
.ich-lines .ich-role {
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.ich-lines li[data-move] .ich-role { color: var(--accent); }

/* ---------- 概率表 ---------- */

.ich-oddswrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ich-odds { width: 100%; min-width: 30rem; border-collapse: collapse; }
.ich-odds caption {
  text-align: left;
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: var(--sp-3);
}
.ich-odds th, .ich-odds td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
  vertical-align: baseline;
}
.ich-odds thead th {
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom-color: var(--ink);
}
.ich-odds tbody th {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  color: var(--accent-soft);
  width: 2.5rem;
}
.ich-odds td { font-variant-numeric: tabular-nums; }
.ich-odds td i { font-style: normal; color: var(--faint); margin-left: .5em; }
.ich-odds tbody tr:first-child th, .ich-odds tbody tr:last-child th { color: var(--accent); }
.ich-odds tbody tr:hover { background: var(--raise); }

/* 390px 上这张表原来要横滚，「五十根蓍草」那一列整个在屏幕外 —— 而这一节
   存在的理由就是两列不一样。分数和百分比改成上下两行，每列省掉一半宽度，
   整张表就塞得进 390 了。我们的人基本全是手机。 */
@media (max-width: 34rem) {
  .ich-odds { min-width: 0; }
  .ich-odds th, .ich-odds td { padding-right: var(--sp-3); }
  .ich-odds thead th { font-size: .72rem; letter-spacing: .06em; }
  .ich-odds tbody th { width: 1.6rem; font-size: var(--step-1); }
  .ich-odds td i { display: block; margin-left: 0; }
}

/* ---------- 八乘八查卦表 ---------- */

.ich-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ich-tbl { width: 100%; min-width: 21rem; border-collapse: collapse; table-layout: fixed; }
.ich-tbl th, .ich-tbl td { border: 1px solid var(--rule); padding: 0; }
.ich-tbl thead th, .ich-tbl tbody th { padding: var(--sp-2) 0; }
.ich-tbl th .ich-mini { margin: 0 auto; }

.ich-corner {
  border-color: transparent !important;
  font-size: .72rem;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 var(--sp-2) var(--sp-2) 0 !important;
  text-align: right;
}
.ich-corner span { display: block; }

.ich-cell {
  display: grid;
  justify-items: center;
  gap: 3px;
  width: 100%;
  padding: var(--sp-2) 0;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.ich-cell b {
  font-weight: 400;
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent-soft);
}
.ich-cell:hover { background: var(--raise); }
.ich-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ich-cell[aria-pressed="true"] { background: var(--ink); }
.ich-cell[aria-pressed="true"] .ich-mini u i { background: var(--accent-ink); }
.ich-cell[aria-pressed="true"] b { color: var(--accent); }

.ich-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
}
.ich-legend li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--step--1); }
.ich-legend b { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); }
.ich-legend span { color: var(--faint); letter-spacing: .04em; }
.ich-legend em { font-style: normal; color: var(--muted); }

/* ---------- 点开一卦 ---------- */

.ich-panel { display: grid; gap: var(--sp-5); }
.ich-panel:empty { display: none; }
.ich-panel:focus { outline: 0; }
.ich-panel > header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ink);
}
.ich-panel .ich-mini { width: 2.6rem; }
.ich-panel .ich-mini u { height: 3px; }

/* 结构那一栏里指向别的卦的链接 */
.ich-link {
  font: inherit;
  font-size: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--accent-soft);
  transition: color var(--dur) var(--ease);
}
.ich-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

.readout dd .ich-mini { display: inline-flex; vertical-align: -.35em; margin-right: .4em; }