/* 项目宇宙 — 在 tian2.css / site.css 之上的补充 */

.u-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.6rem;
  margin: 1.6rem 0 .6rem;
}
.u-field { display: flex; flex-direction: column; gap: .35rem; }
.u-field label {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-2);
}
.u-field select,
.u-field input {
  font-family: var(--font-body-en);
  font-size: .95rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  padding: .45rem .6rem;
  min-width: 11rem;
}
.u-field input { min-width: 17rem; }
.u-field select:focus,
.u-field input:focus { outline: 2px solid var(--coral); outline-offset: 1px; }

.u-btn {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  padding: .5rem .9rem;
  cursor: pointer;
}
.u-btn:hover { background: var(--ink); color: var(--cream); }
.u-btn[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: #fff; }

.u-status {
  font-size: var(--fs-small);
  color: var(--fg-2);
  margin: .4rem 0 0;
  min-height: 1.4em;
}
.u-status b { color: var(--coral); font-weight: 600; }

/* ---- 总览：二十二个赛道的排版索引 ---- */
.u-index { margin: 1.4rem 0 0; border-top: 2.5px solid var(--ink); }

.u-ihead,
.u-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.2rem minmax(5rem, 10rem) 3rem 4.4rem;
  align-items: center;
  gap: 0 1.1rem;
  width: 100%;
  text-align: left;
}

.u-ihead {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-3, #7A6B53);
  padding: .5rem 0 .45rem;
  border-bottom: 1px solid var(--stroke-color, #D8CBB0);
}
.u-ihead .r { text-align: right; }

.u-row {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--stroke-color, #D8CBB0);
  padding: .62rem .3rem .62rem 0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.u-row:hover,
.u-row:focus-visible { background: var(--cream-2); outline: none; }
.u-row[data-empty="1"] { opacity: .32; }

.r-name { display: flex; align-items: baseline; gap: .7rem; min-width: 0; font-size: .97rem; }
.r-code {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--fg-3, #7A6B53);
  font-weight: 400;
  flex: none;
  width: 3.4rem;
}
.u-row:hover .r-code { color: var(--coral); }

.r-n {
  font-family: var(--font-display-en);
  font-size: 1rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.u-row[data-filtering="1"] .r-n { color: var(--coral); }

.r-bar { position: relative; height: 7px; background: var(--cream-2); display: block; }
.r-bar i { position: absolute; left: 0; top: 0; height: 100%; display: block; }
.r-full { background: rgba(44, 36, 22, .34); }
.u-row[data-filtering="1"] .r-full { background: rgba(44, 36, 22, .13); }
.r-hit { background: var(--coral); }

.r-g {
  font-family: var(--font-display-en);
  font-size: .9rem;
  color: var(--fg-3, #7A6B53);
  text-align: right;
}

.r-sp { color: var(--fg-3, #7A6B53); text-align: right; line-height: 0; }
.u-row:hover .r-sp { color: var(--coral); }
.u-spark { display: inline-block; vertical-align: middle; }

@media (max-width: 720px) {
  .u-ihead, .u-row { grid-template-columns: minmax(0, 1fr) 3.6rem 4.4rem; }
  .u-ihead span:nth-child(3), .u-ihead span:nth-child(4),
  .u-row .r-bar, .u-row .r-g { display: none; }
  .r-name { flex-direction: column; gap: .1rem; }
  .r-code { width: auto; }
}

/* ---- 单赛道详图 ---- */
.u-detail { display: none; }
.u-detail.on { display: block; }
.u-overview.off { display: none; }

.u-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  border-bottom: 2.5px solid var(--ink);
  padding-bottom: .6rem;
  margin-bottom: 1rem;
}
.u-head h3 { margin: 0; font-size: var(--fs-h3); }
.u-head .u-sub { font-size: var(--fs-small); color: var(--fg-2); }

.u-below {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 1.6rem 2rem;
  align-items: start;
  margin-top: 1.6rem;
}
@media (max-width: 900px) {
  .u-below { grid-template-columns: 1fr; }
}
.u-tog {
  width: auto !important;
  padding: 0 .5rem;
  font-size: .68rem !important;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.u-tog[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: #fff; }

.u-canvas-wrap {
  position: relative;
  border: 1.5px solid var(--ink);
  background: var(--cream);
  touch-action: none;
}
.u-canvas-wrap canvas { display: block; width: 100%; height: auto; cursor: grab; }
.u-canvas-wrap canvas.drag { cursor: grabbing; }

.u-zoom {
  position: absolute; right: .55rem; top: .55rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.u-zoom button {
  width: 2rem; height: 2rem; line-height: 1;
  font-family: var(--font-label); font-size: .9rem;
  background: var(--cream); color: var(--ink);
  border: 1.5px solid var(--ink); cursor: pointer;
}
.u-zoom button:hover { background: var(--ink); color: var(--cream); }

.u-tip {
  position: absolute;
  pointer-events: none;
  max-width: 22rem;
  background: var(--ink);
  color: var(--cream);
  font-size: .78rem;
  line-height: 1.5;
  padding: .45rem .6rem;
  opacity: 0;
  transition: opacity .08s;
  z-index: 5;
}
.u-tip.on { opacity: 1; }

/* 分面：每组一张「这一组落在哪」的小图 */
.u-fh {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2.5px solid var(--ink);
  padding-bottom: .35rem;
  margin: 1.6rem 0 .8rem;
}
.u-facets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .9rem;
}
.u-facet {
  display: block;
  text-align: left;
  background: var(--cream);
  border: 1.5px solid var(--stroke-color, #D8CBB0);
  padding: 0 0 .5rem;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}
.u-facet:hover, .u-facet:focus-visible { border-color: var(--coral); outline: none; }
.u-facet[aria-pressed="true"] { border-color: var(--coral); border-width: 2.5px; }
.u-facet canvas {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1.5px solid var(--stroke-color, #D8CBB0);
}
.u-facet[aria-pressed="true"] canvas { border-bottom-color: var(--coral); }
.f-cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .4rem;
  padding: .45rem .55rem .1rem;
}
.f-name { font-size: .9rem; line-height: 1.3; }
.u-facet[aria-pressed="true"] .f-name { color: var(--coral); font-weight: 600; }
.f-n { font-family: var(--font-display-en); font-size: .85rem; color: var(--fg-3, #7A6B53); }
.f-terms {
  display: block;
  padding: 0 .55rem;
  font-size: .72rem;
  line-height: 1.45;
  color: var(--fg-3, #7A6B53);
}

/* 选中项目详情 */
.u-node { border-top: 2.5px solid var(--ink); padding-top: .7rem; }
.u-node .ph { font-size: var(--fs-small); color: var(--fg-2); line-height: 1.7; }
.u-node h5 { margin: 0 0 .35rem; font-size: 1rem; line-height: 1.45; font-weight: 600; }
.u-node .nm { font-size: var(--fs-small); color: var(--fg-2); margin: 0 0 .6rem; }
.u-node .ab {
  font-size: .82rem; line-height: 1.7; color: var(--fg-2);
  max-height: 13rem; overflow-y: auto;
  border-left: 2.5px solid var(--cream-2); padding-left: .7rem; margin: 0 0 .7rem;
}
.u-node .nn { list-style: none; margin: .3rem 0 0; padding: 0; }
.u-node .nn li { border-top: 1px solid var(--stroke-color, #D8CBB0); }
.u-node .nn button {
  background: none; border: 0; padding: .45rem .1rem; cursor: pointer;
  font: inherit; font-size: .82rem; line-height: 1.45; text-align: left;
  color: var(--ink); width: 100%;
}
.u-node .nn button:hover { color: var(--coral); }
.u-node .nn .sim { font-family: var(--font-display-en); color: var(--fg-3, #7A6B53); }

.u-legend {
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem;
  font-size: .76rem; color: var(--fg-2);
  margin-top: .6rem;
}
.u-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.u-key { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.u-key.base { background: rgba(44, 36, 22, .38); }
.u-key.hi { background: #E8614C; }
.u-key.blob { width: 18px; height: 11px; border-radius: 6px; background: rgba(150,131,100,.55); }
.u-key.line { width: 16px; height: 0; border-top: 1.5px solid rgba(122, 107, 83, .55); border-radius: 0; }

.u-note {
  font-size: .8rem; color: var(--ink-3, #7A6B53); line-height: 1.7;
  margin-top: .9rem; padding-left: .9rem;
  border-left: 2.5px solid var(--coral); max-width: 78ch;
}

.u-load {
  font-size: var(--fs-small); color: var(--fg-2);
  padding: 2rem 0; text-align: center;
}

/* 第一层：读者需要知道的四件事 */
.u-plain { margin: 1.2rem 0 0; }
.u-plain dt {
  font-family: var(--font-serif-zh);
  font-size: 1.05rem;
  color: var(--ink);
  margin-top: 1.3rem;
  padding-top: .8rem;
  border-top: 1px solid var(--stroke-color, #D8CBB0);
}
.u-plain dt:first-child { border-top: 0; padding-top: 0; margin-top: .4rem; }
.u-plain dd {
  margin: .4rem 0 0;
  font-size: .95rem;
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-width: 68ch;
}
html[lang="en"] .u-plain dt { font-family: var(--font-body-en); font-weight: 600; }

/* 第二层：技术细节，默认收起 */
.u-more { margin-top: 2rem; border-top: 2.5px solid var(--ink); }
.u-more > summary {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink);
  padding: .7rem 0;
  cursor: pointer;
  list-style: none;
}
.u-more > summary::-webkit-details-marker { display: none; }
.u-more > summary::before { content: "+ "; color: var(--coral); }
.u-more[open] > summary::before { content: "\2212 "; }
.u-more > summary:hover { color: var(--coral); }
.u-more[open] > summary { border-bottom: 1px solid var(--stroke-color, #D8CBB0); }
.u-more .u-method { margin-bottom: 1.4rem; }

.u-method dt {
  font-family: var(--font-label); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink); margin-top: 1.1rem;
}
.u-method dd {
  margin: .35rem 0 0; font-size: .92rem; line-height: var(--lh-body);
  color: var(--fg-2); max-width: 74ch;
}