/* 光年邮局 · 视图层样式：首页 / 写信 / 在途 / 星志 / 档案馆 / 关于 */

/* ---------- 首页：画布主导，标题即招牌 ---------- */
#view:has(.home-hero) { display: flex; flex-direction: column; justify-content: center; }

.home-hero {
  display: flex;
  align-items: flex-end;
  gap: var(--s-12);
  padding: var(--s-16) 0 var(--s-8);
  min-height: 62vh;
}
.home-hero__title {
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.18;
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: var(--text);
  text-shadow: 0 0 34px rgba(230, 199, 124, 0.18);
  border-right: 1px solid var(--hairline);
  padding-right: var(--s-6);
}
.home-hero__side { display: flex; flex-direction: column; gap: var(--s-3); padding-bottom: var(--s-4); }
.home-hero__manifesto { font-size: var(--fs-body-lg); letter-spacing: 0.28em; }
.home-hero__manifesto--dim { color: var(--ink-dim); font-size: var(--fs-body); }
.home-hero__cta { align-self: flex-start; margin-top: var(--s-6); letter-spacing: 0.3em; padding-inline: var(--s-8); }

.home-ticker {
  display: block;
  align-self: flex-end;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--hairline);
  transition: color var(--t-fast) var(--ease-out);
}
.home-ticker:hover { color: var(--starlight); }

/* ---------- 写信 ---------- */
.steps {
  display: flex;
  gap: var(--s-8);
  list-style: none;
  margin-bottom: var(--s-8);
}
.steps__item { display: flex; align-items: center; gap: var(--s-2); color: var(--ink-dim); font-size: var(--fs-label); letter-spacing: 0.2em; }
.steps__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-round);
  font-size: var(--fs-label);
}
.steps__item.is-current { color: var(--starlight); }
.steps__item.is-current .steps__dot { border-color: var(--starlight); }
.steps__item.is-done { color: var(--text); }
.steps__item.is-done .steps__dot { border-color: var(--text); }

.pick-toolbar { display: flex; gap: var(--s-3); margin-bottom: var(--s-4); }
.pick-search { flex: 1; }
.pick-toolbar .btn { flex-shrink: 0; letter-spacing: 0.2em; }

.pick-list { max-height: 52vh; overflow-y: auto; border-top: 1px solid var(--hairline); }
.pick-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 1.4fr auto;
  gap: var(--s-4);
  align-items: baseline;
  width: 100%;
  padding: var(--s-3) var(--s-2);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out);
}
.pick-row:hover, .pick-row.is-picked { background: rgba(230, 199, 124, 0.07); }
.pick-row.is-picked { box-shadow: inset 3px 0 0 var(--starlight); }
.pick-row__name { letter-spacing: 0.08em; }
.pick-row__en { color: var(--ink-dim); font-size: var(--fs-label); font-style: italic; letter-spacing: 0.04em; }
.pick-row__dist { color: var(--ink-dim); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.pick-list__empty { color: var(--ink-dim); padding: var(--s-6) 0; letter-spacing: 0.08em; }

.write-pane { border: 1px solid var(--hairline); padding: var(--s-6); }

.star-plaque {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
}
.star-plaque__name { font-size: var(--fs-title); font-weight: 600; letter-spacing: 0.1em; color: var(--starlight); }
.star-plaque__meta { color: var(--ink-dim); font-size: var(--fs-label); letter-spacing: 0.12em; }

.letter-fields { display: flex; flex-direction: column; gap: var(--s-3); }
.write-actions { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-6); }

.draft-notice {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  border: 1px dashed var(--hairline-strong);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-6);
  color: var(--ink-dim);
  font-size: var(--fs-body);
}

/* ---------- 封缄 / 详情双栏 ---------- */
.seal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
  gap: var(--s-8);
  align-items: start;
}
.seal-stamp { display: flex; justify-content: center; }
.postmark {
  width: 132px;
  height: 132px;
  color: var(--postmark);
  transform: rotate(-8deg);
  opacity: 0.92;
  font-family: var(--font-serif);
}
.seal-stamp--small .postmark { width: 104px; height: 104px; }
.seal-meta { list-style: none; margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); }
.seal-meta li {
  font-size: var(--fs-label);
  color: var(--ink-dim);
  letter-spacing: 0.1em;
  border-bottom: 1px dashed var(--hairline);
  padding-bottom: var(--s-2);
}

/* ---------- 在途 ---------- */
.transit-rows { display: flex; flex-direction: column; }
.transit-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-2);
  border-bottom: 1px solid var(--hairline);
  transition: background-color var(--t-fast) var(--ease-out);
}
.transit-row:hover { background: rgba(230, 199, 124, 0.05); }
.transit-row__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.transit-row__star { font-size: var(--fs-title); font-weight: 600; letter-spacing: 0.1em; }
.transit-row__dates { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-label); color: var(--ink-dim); letter-spacing: 0.1em; }

.transit-detail { margin-top: var(--s-4); }

/* ---------- 光轨 ---------- */
.track { padding: var(--s-2) 0; }
.track__line { position: relative; height: 2px; background: var(--hairline-strong); }
.track__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(230, 199, 124, 0.25), var(--starlight));
  transition: width var(--t-med) var(--ease-out);
}
.track__fill.is-done { background: var(--starlight); }
.track__dot {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--starlight);
  box-shadow: 0 0 10px 2px rgba(230, 199, 124, 0.6);
  transform: translate(-50%, -50%);
  transition: left var(--t-med) var(--ease-out);
}
.track__dot.is-done { box-shadow: 0 0 14px 4px rgba(230, 199, 124, 0.8); }
.track__end {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-dim);
  font-size: var(--fs-label);
}
.track__end.is-done { color: var(--starlight); }
.track__labels { display: flex; justify-content: space-between; margin-top: var(--s-2); font-size: var(--fs-label); color: var(--ink-dim); letter-spacing: 0.1em; }
.track--detailed { padding: var(--s-4) 0 var(--s-2); }

.track__scale { position: relative; height: 14px; }
.track__tick { position: absolute; top: 0; width: 1px; height: 9px; background: var(--hairline-strong); }
.track__tick.is-passed { background: var(--starlight); }
.track__tick-name {
  position: absolute;
  top: 12px;
  left: 0;
  transform: translateX(-50%);
  font-size: 10.5px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
}
.track__tick:hover .track__tick-name { opacity: 1; }
.track--detailed .track__scale { margin-bottom: var(--s-4); }

/* ---------- 读数 ---------- */
.readout__title { font-size: var(--fs-title); font-weight: 600; letter-spacing: 0.14em; margin-bottom: var(--s-4); }
.readout__rows { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.readout__row { display: grid; grid-template-columns: 72px 1fr; gap: var(--s-4); font-size: var(--fs-body); }
.readout__row dt { color: var(--ink-dim); font-size: var(--fs-label); letter-spacing: 0.18em; padding-top: 2px; }
.readout__row dd { letter-spacing: 0.04em; }
.readout__actions { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-6); }

/* ---------- 星志 ---------- */
.almanac-toolbar { display: flex; gap: var(--s-3); margin-bottom: var(--s-6); }
.almanac-search { flex: 1; }
.almanac-sort { width: auto; flex-shrink: 0; }

.almanac-head, .almanac-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.1fr 0.7fr 2.2fr;
  gap: var(--s-4);
  align-items: baseline;
}
.almanac-head {
  padding: 0 var(--s-2) var(--s-2);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--hairline-strong);
}
.almanac-rows { border-bottom: 1px solid var(--hairline); }
.almanac-row {
  width: 100%;
  text-align: left;
  padding: var(--s-3) var(--s-2);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hairline);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out);
}
.almanac-row:first-child { border-top: 0; }
.almanac-row:hover { background: rgba(230, 199, 124, 0.06); }
.almanac-row__name strong { display: block; font-weight: 600; letter-spacing: 0.08em; }
.almanac-row__name em { display: block; font-size: var(--fs-label); color: var(--ink-dim); font-style: italic; }
.almanac-row__note {
  color: var(--ink-dim);
  font-size: var(--fs-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 抽屉 ---------- */
.drawer-overlay, .drawer-overlay * { letter-spacing: normal; }
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(5, 8, 18, 0.6);
}
.drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: var(--night-raised);
  border-left: 1px solid var(--hairline-strong);
  padding: var(--s-8);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  animation: drawer-in var(--t-med) var(--ease-out);
}
@keyframes drawer-in {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.drawer__close { align-self: flex-end; }
.drawer__name { font-size: 26px; font-weight: 600; letter-spacing: 0.1em; }
.drawer__en { color: var(--ink-dim); font-size: var(--fs-label); font-style: italic; letter-spacing: 0.08em; }
.drawer__data { border-top: 1px solid var(--hairline); padding-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.drawer__note { color: var(--text); border-top: 1px dashed var(--hairline); padding-top: var(--s-4); line-height: 2; }
.drawer__count { color: var(--ink-dim); font-size: var(--fs-label); letter-spacing: 0.1em; }
.drawer__actions { display: flex; gap: var(--s-3); margin-top: var(--s-2); }
.drawer__actions .btn { flex: 1; }

/* ---------- 档案馆（竖排排印签名动作） ---------- */
.archive-disclaimer {
  color: var(--ink-dim);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  border: 1px dashed var(--hairline-strong);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-8);
}
.archive-list { display: flex; flex-direction: column; gap: var(--s-12); }

.archive-card { border-left: 0; border-right: 3px solid var(--postmark); }
.archive-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-4);
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(43, 38, 32, 0.22);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-6);
}
.archive-card__arrive { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.archive-card__arrive-label {
  font-size: var(--fs-label);
  letter-spacing: 0.3em;
  color: var(--postmark);
  border: 1px solid var(--postmark);
  padding: 1px var(--s-2);
}
.archive-card__arrive-star { font-size: var(--fs-title); font-weight: 600; letter-spacing: 0.1em; }
.archive-card__arrive-year { color: rgba(43, 38, 32, 0.62); font-size: var(--fs-label); }
.archive-card__meta { color: rgba(43, 38, 32, 0.62); font-size: var(--fs-label); letter-spacing: 0.08em; }
.archive-card__title { font-size: var(--fs-body-lg); font-weight: 600; letter-spacing: 0.1em; margin-bottom: var(--s-4); }
.archive-card__body {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  max-height: 300px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  line-height: 2.3;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin: 0 auto;
  padding: var(--s-2);
}
.archive-card__foot { margin-top: var(--s-6); font-size: var(--fs-label); }
.archive-card__foot .link { border-bottom-color: rgba(43, 38, 32, 0.4); color: rgba(43, 38, 32, 0.75); }
.archive-card__foot .link:hover { color: var(--postmark); border-bottom-color: var(--postmark); }

/* ---------- 关于 ---------- */
.about-wrap { display: flex; flex-direction: column; gap: var(--s-12); max-width: 720px; }
.about-sec__title { font-size: var(--fs-title); font-weight: 600; letter-spacing: 0.16em; margin-bottom: var(--s-4); }
.about-sec__p { margin-bottom: var(--s-3); }
.about-sec__p--dim { color: var(--ink-dim); font-size: var(--fs-label); letter-spacing: 0.06em; }
.about-links { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.about-manage-row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.import-input { color: var(--ink-dim); font-size: var(--fs-label); }
.import-input::file-selector-button {
  font-family: var(--font-serif);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--hairline-strong);
  padding: 8px var(--s-4);
  margin-right: var(--s-3);
  cursor: pointer;
}
.import-input::file-selector-button:hover { color: var(--starlight); border-color: var(--starlight); }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .seal-grid { grid-template-columns: 1fr; }
  .almanac-head { display: none; }
  .almanac-row { grid-template-columns: 1.4fr 1fr auto; }
  .almanac-row span:nth-child(4), .almanac-row span:nth-child(5), .almanac-row__note { display: none; }
  .home-hero { flex-direction: row; gap: var(--s-6); min-height: 54vh; align-items: center; }
}
@media (max-width: 640px) {
  .home-hero { flex-direction: column; align-items: flex-start; gap: var(--s-8); padding-top: var(--s-8); }
  .home-hero__title { border-right: 0; border-bottom: 1px solid var(--hairline); padding-right: 0; padding-bottom: var(--s-4); min-height: 180px; }
  .home-ticker { align-self: stretch; text-align: left; }
  .steps { gap: var(--s-4); }
  .pick-row { grid-template-columns: 1fr auto; }
  .pick-row__en { display: none; }
  .write-pane { padding: var(--s-4); }
  .paper { padding: var(--s-6); }
  .archive-card__body { max-height: 240px; }
}