/* solar-atlas · 主题覆盖层 v3
 * 只修改 UI 配色与布局，不改动原 solar.css / solar.js
 * 设计取向：深空观测站 —— 暖黑底 + 琥珀高光
 * 布局：左侧常驻栏（品牌 + 导航），主画布让出左栏宽度 */

:root {
  /* —— 琥珀暖色调（全量） —— */
  --bg: #0a0806;
  --bg-soft: #14100b;
  --ink: #efe7d7;
  --ink-dim: #c9bda6;
  --ink-muted: #968c7a;
  --ink-faint: #655d4f;
  --line: #2e2a22;
  --line-bright: #6e6455;
  --line-measure: #4a4336;
  --node: #e8a94f;          /* 主高光色 —— 琥珀 */
  --accent-cyan: #e8a94f;
  --accent-yellow: #ffd166; /* 亮琥珀：日期 / 焦点 */
  --accent-red: #e07a5f;    /* 陶土红：警示 / 当前选择 */
  --panel-bg: rgba(17, 13, 9, 0.94);
  --panel-blur: 18px;

  /* —— 布局尺寸 —— */
  --ui-sidebar-w: 232px;
  --ui-topbar-height: 0px;
}

/* —— 通用微调 —— */
::selection { background: rgba(232, 169, 79, 0.30); }
.atlas ::-webkit-scrollbar-thumb { background: var(--line-bright); }
.atlas ::-webkit-scrollbar-track { background: transparent; }

/* ====================================================
 *  左侧常驻栏 · 品牌区（masthead 移入侧栏顶部）
 * ==================================================== */
.atlas .masthead {
  position: absolute;
  top: 26px;
  left: 22px;
  width: calc(var(--ui-sidebar-w) - 44px);
  max-width: none;
  z-index: 6;
  pointer-events: auto;
}
.atlas .masthead h1 {
  font-size: 17px;
  letter-spacing: .34em;
  background: linear-gradient(90deg, var(--ink), var(--ink-dim));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.atlas .masthead i {
  width: 38px;
  margin: 10px 0;
  background: linear-gradient(90deg, var(--node), transparent);
}
.atlas .masthead p {
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--ink-faint);
}
.atlas .masthead__count {
  margin-top: 10px;
  color: var(--node);
}
.atlas[data-back=yes] .masthead { top: 26px; }

/* ====================================================
 *  左侧常驻栏 · 主体（topbar 全高改造）
 * ==================================================== */
.atlas .topbar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--ui-sidebar-w);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 158px 20px 22px;   /* 顶部让位给 masthead */
  background: linear-gradient(180deg,
    rgba(20, 15, 9, 0.92) 0%,
    rgba(16, 12, 8, 0.78) 55%,
    rgba(14, 11, 7, 0.62) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid var(--line);
  z-index: 5;
  pointer-events: auto;
}
.atlas .topbar::before {
  content: "";
  position: absolute;
  top: 132px; left: 20px; right: 20px;
  height: 1px;
  background: linear-gradient(90deg, var(--node) 0%, rgba(232,169,79,.15) 70%, transparent 100%);
  opacity: .6;
}
.atlas .topbar::after {
  /* 侧栏顶部微光 */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 120px;
  background: radial-gradient(80% 100% at 20% 0%, rgba(232,169,79,.07), transparent 70%);
  pointer-events: none;
}

/* —— 行容器：三组导航纵向堆叠 —— */
.atlas .topbar__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  min-height: 0;
  pointer-events: auto;
}
.atlas .topbar__left,
.atlas .topbar__scene,
.atlas .topbar__utility {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  border-radius: 0;
  justify-self: auto;
  grid-area: auto;
  grid-row: auto;
  grid-column: auto;
  flex-wrap: nowrap;
}
/* 分组分隔线 */
.atlas .topbar__left { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.atlas .topbar__scene { padding-bottom: 14px; border-bottom: 1px solid var(--line); }

.atlas .topbar__scene .navgroup,
.atlas .topbar__utility .navgroup {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* —— 导航按钮 —— */
.atlas .navbtn {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 9px 16px 9px 18px;
  text-align: left;
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--ink-muted);
  border-left: 1px solid transparent;
  transition: color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), background var(--t-hover) var(--ease-out);
}
.atlas .navbtn::after { display: none; }
.atlas .navbtn em {
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: .14em;
  color: var(--ink-faint);
  margin-left: auto;
}
.atlas .navbtn:hover {
  color: var(--ink);
  border-left-color: var(--node);
  background: linear-gradient(90deg, rgba(232,169,79,.08), transparent 80%);
}
.atlas .navbtn[aria-pressed=true],
.atlas .navbtn[data-open=yes] {
  color: var(--node);
  border-left-color: var(--node);
}
.atlas .navbtn--home { color: var(--ink-dim); }

/* —— 下拉菜单：从侧栏向右展开 —— */
.atlas .topbar .navmenu {
  left: calc(var(--ui-sidebar-w) - 8px);
  right: auto;
  top: auto;
  position: fixed;
}

/* —— 二级菜单：增加内边距，文字不贴边 —— */
.atlas .navmenu {
  min-width: 216px;
  padding: 12px 14px;
  gap: 2px;
}
.atlas .navmenu__item {
  padding: 10px 18px;
  letter-spacing: .18em;
  border-radius: 2px;
}
.atlas .navmenu__item:hover {
  background: rgba(232, 169, 79, 0.08);
}
.atlas .navmenu__check {
  padding: 9px 18px;
  gap: 10px;
}
.atlas .navmenu__item em,
.atlas .navmenu__item .navmenu__meta {
  margin-left: 16px;
}

/* ====================================================
 *  主画布与浮层避让
 * ==================================================== */
.atlas .timeline {
  left: calc(var(--ui-sidebar-w) + 30px);
  right: 30px;
  bottom: 20px;
}
.atlas .timeline__year { color: var(--accent-yellow); }

.atlas .onboard { left: calc(var(--ui-sidebar-w) + 30px); }

/* ====================================================
 *  intro / 面板配色细化
 * ==================================================== */
.intro { padding-left: var(--ui-sidebar-w); }
.intro__title {
  background: linear-gradient(180deg, var(--ink) 30%, var(--ink-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.intro__cta {
  border-color: var(--node);
  background: rgba(232, 169, 79, 0.08);
}
.intro__cta:hover { background: var(--node); color: var(--bg); }

.atlas .chip:hover,
.atlas .chip[aria-pressed=true] {
  color: var(--node);
  border-color: var(--node);
  background: rgba(232, 169, 79, 0.10);
}

.t-label-bright { color: var(--node); }
.label.is-hot .label__text { color: var(--node); }
.timeline__dot { background: var(--node); }
.archive__close:hover, .backbtn:hover { color: var(--node); }

.atlas[data-archive=open] .topbar { opacity: .92; }

/* ====================================================
 *  响应式：窄屏退化为顶部横条
 * ==================================================== */
@media (max-width: 880px) {
  :root { --ui-sidebar-w: 0px; }
  .atlas .masthead { top: 16px; left: 16px; width: auto; }
  .atlas .topbar {
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto;
    padding: 12px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .atlas .topbar::before { display: none; }
  .atlas .topbar__row { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .atlas .topbar__left, .atlas .topbar__scene, .atlas .topbar__utility {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    border-bottom: 0; padding-bottom: 0;
  }
  .atlas .navbtn { width: auto; padding: 6px 8px; border-left: 0; }
  .atlas .topbar .navmenu { position: absolute; left: auto; right: 0; top: calc(100% + 6px); }
  .intro { padding-left: 0; }
}

/* ====================================================
 *  侧栏品牌区放大 + 面板间距修正
 * ==================================================== */

/* —— 侧栏顶部 logo（品牌标题）放大 —— */
.atlas .masthead h1 {
  font-size: 23px;
  letter-spacing: .26em;
}
.atlas .masthead i {
  width: 58px;
  margin: 12px 0;
}
.atlas .masthead p {
  font-size: 10px;
}

/* —— 关于作者面板：内边距对齐下方链接列表（10px 12px）的呼吸感 —— */
.atlas .creatorpanel {
  padding: 30px 30px 30px;
  gap: 18px;
}
.atlas .creatorpanel__head {
  padding: 0 2px 8px;
}
.atlas .creatorpanel__name {
  padding: 10px 12px;
}
.atlas .creatorpanel__note {
  padding: 10px 12px;
}
.atlas .creatorpanel__links {
  gap: 8px;
}
.atlas .creatorpanel__links a {
  padding: 10px 12px;
}
.atlas .creatorpanel__foot {
  padding: 8px 12px 0;
}

/* —— 任务图鉴（MISSION INDEX）列表行：补左右内边距 —— */
.atlas .archive__article summary {
  padding: 12px 14px;
}
.atlas .archive__article details p {
  padding: 0 14px;
}

/* —— 主页按钮的 house logo 放大 —— */
.atlas .navbtn--home span[aria-hidden] {
  font-size: 20px;
  line-height: 1;
  color: var(--node);
  transform: translateY(1px);
}
.atlas .mobilebar__btn--home span[aria-hidden] {
  font-size: 18px;
  line-height: 1;
  color: var(--node);
}

/* —— 在轨目录面板：SOURCE / FETCHED / 尺度说明 行加左右内边距 —— */
.atlas .catalogpanel .archive__row {
  padding-left: 14px;
  padding-right: 14px;
}

/* —— 已建档任务：列表 cell 外加左右 margin，cell 内加左右 padding —— */
.atlas .catalogpanel .archive__listitem {
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 12px;
  padding-right: 12px;
}

/* —— 在轨目录·已建档任务：搜索栏与 cell 左右对齐，宽度收缩不超外框 —— */
.atlas .catalogpanel .archive__listitem {
  width: calc(100% - 20px); /* 原为 100%，加 margin 后会溢出外框 */
  box-sizing: border-box;
}
.atlas .catalogpanel .catalogpanel__search {
  display: block;
  width: calc(100% - 20px);
  box-sizing: border-box;
  margin-left: 10px;
  margin-right: 10px;
}

/* —— 在轨目录·任务图鉴：SOURCE 数据来源卡片（archive__rows）加左右内边距 ——
 * 原站 heritage 规则把该卡片 padding 清零，需同等特异性 + 靠后级联压回 */
.atlas.atlas.atlas.atlas .catalogpanel .archive__rows {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* ====================================================
 *  v4 · 布局重构
 *  1. 侧栏流式布局（宽度随中/EN 内容自适应）
 *  2. 在轨目录：右上角抽屉
 *  3. 指南：贴侧栏右侧、垂直居中
 *  4. 背景音乐：右上角抽屉
 *  5. 搜索：贴侧栏右侧、垂直居中 + 桌面端关闭按钮
 * ==================================================== */

/* —— 抽屉 / 居中面板进场动画 ——
 * 居中面板的 translateY(-50%) 必须烘焙进 keyframes，
 * 否则 panel-in 的 fill:both 会在动画结束后用末帧 transform 覆盖居中位移 */
@keyframes drawer-in-right {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes side-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* —— 1. 侧栏流式布局：宽度随内容自适应，中/EN 切换不再溢出 —— */
.atlas .topbar {
  width: max-content;
  min-width: var(--ui-sidebar-w);
  max-width: min(380px, 45vw);
}
.atlas .masthead {
  width: auto;
  left: 22px;
  right: 22px;
}
/* 下拉二级菜单锚定侧栏右缘，随侧栏实际宽度自动跟随 */
.atlas .topbar .navmenu {
  position: absolute;
  left: calc(100% - 8px);
  right: auto;
  top: auto;
}

/* —— 2. 在轨目录（任务图鉴）：右上角抽屉 ——
 * 原站桌面规则特异性为 4，此处用双 .atlas 对齐并靠后级联压过 */
.atlas.atlas:not([data-device=mobile]) .catalogpanel {
  top: 0;
  right: 0;
  bottom: auto;
  height: auto;
  max-height: calc(100dvh - 36px);
  border-radius: 0 0 0 18px;
  animation: drawer-in-right .34s cubic-bezier(.22, .61, .36, 1) both !important;
}

/* —— 4. 背景音乐（音乐库）：右上角抽屉，同目录面板 —— */
.atlas:not([data-device=mobile]) .topbar .musicpanel {
  position: fixed;
  left: auto;
  right: 0;
  top: 0;
  bottom: auto;
  width: min(340px, 90vw);
  min-width: 0;
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  border-radius: 0 0 0 18px;
  z-index: 60;
  animation: drawer-in-right .34s cubic-bezier(.22, .61, .36, 1) both !important;
}

/* —— 3 & 5. 指南 / 搜索：贴侧栏右缘，垂直对齐各自的导航按钮 ——
 * 面板中线 = 对应按钮中线（搜索 ≈304px，指南 ≈581px，视图 ≈450px）。
 * transform 写在元素本身，入场动画只做透明度渐变 */
.atlas:not([data-device=mobile]) .topbar .searchpanel {
  position: absolute;
  left: 100%;
  right: auto;
  top: 304px;
  bottom: auto;
  height: fit-content;
  margin: 0;
  transform: translateY(-50%);
  width: 320px;
  max-width: none;
  max-height: min(560px, 70vh);
  overflow-y: auto;
  border-radius: 0 14px 14px 0;
  z-index: 40;
  animation: side-fade .28s var(--ease-out) both !important;
}
.atlas:not([data-device=mobile]) .topbar .guide {
  position: absolute;
  left: 100%;
  right: auto;
  top: 581px;
  bottom: auto;
  height: fit-content;
  margin: 0;
  transform: translateY(-50%);
  width: 320px;
  max-width: none;
  max-height: min(640px, 76vh);
  overflow-y: auto;
  border-radius: 0 14px 14px 0;
  z-index: 40;
  animation: side-fade .28s var(--ease-out) both !important;
}

/* —— 6. 视图菜单（navmenu--wide）：与指南同款——贴侧栏右缘、
 * 中线对齐“视图”按钮。navmenu 是 .navgroup（position:relative，恰好包住
 * 按钮）的子元素，top:50% + translate -50% 即中线对齐按钮，无需固定像素。
 * 居中位移用独立 translate 属性：原站 keyframes 的 transform 会覆盖元素
 * 自身 transform（fill both 永久保留末帧），但管不到 translate 属性 */
.atlas:not([data-device=mobile]) .topbar .navmenu--wide {
  top: 50%;
  bottom: auto;
  translate: 0 -50%;
  max-height: min(76vh, 760px);
  overflow-y: auto;
  border-radius: 0 14px 14px 0;
}

/* —— 5b. 移除搜索面板关闭按钮（bundle 全端渲染，用 CSS 隐藏） —— */
.atlas .searchpanel__close {
  display: none !important;
}

/* —— 5b2. 搜索栏加高，文字垂直居中（原样式为下划线式、padding-bottom 8px） —— */
.atlas .searchpanel input {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff08;
  line-height: 46px;
  text-transform: none;
  letter-spacing: .06em;
  box-sizing: border-box;
}
.atlas .searchpanel input:focus {
  border-color: var(--line-bright);
}

/* —— 5c. 搜索面板内部布局修补 —— */
/* “回车定位”提示：原样式行高过小导致文字上下被裁 */
.atlas .searchpanel__meta {
  padding: 6px 10px;
  line-height: 1.5;
}
/* 结果项：文字不再贴左右边缘 */
.atlas .searchpanel__item {
  padding: 10px 12px;
}

/* —— 4b. 背景音乐-音乐库（hall 全屏页）：改为右上角抽屉 ——
 * shared 规则特异性 6（4 类 + 2 属性），此处用 7 压过 */
.atlas.atlas.atlas.atlas[data-ui-system=shared]:not([data-device=mobile]) .hall {
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  inset: 0 0 auto auto;
  width: min(760px, 62vw);
  max-height: calc(100dvh - 28px);
  height: fit-content;
  border-radius: 0 0 0 18px;
  overflow-y: auto;
  animation: drawer-in-right .34s cubic-bezier(.22, .61, .36, 1) both !important;
}

/* —— 流式侧栏的窄屏回退：恢复顶部横条满宽 —— */
@media (max-width: 880px) {
  .atlas .topbar {
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .atlas .masthead { right: auto; }
}

/* ====================================================
 *  主页（intro）重设计 —— 左下海报式布局
 *  保留全部功能：标题点击重播、进入图谱、音乐开关（右上）、
 *  跳过开场（右下）、系统状态行、telemetry、创作者署名
 * ==================================================== */
.atlas:not([data-device=mobile]) .intro {
  place-items: end start;
  padding: 0 0 8vh 5vw;
}
/* 遮罩改为烘托左下内容区 */
.atlas:not([data-device=mobile]) .intro__scrim {
  background:
    radial-gradient(75% 60% at 22% 74%, #0a0c1066, #020306c9 60%, #020306ee),
    linear-gradient(180deg, #00000033, #0000 34%, #000000b0);
}
.atlas:not([data-device=mobile]) .intro__inner {
  width: auto;
  max-width: min(1000px, 88vw);
  margin: 0;
  padding: 0;
}
/* eyebrow：日期行加琥珀竖条强调 */
.atlas:not([data-device=mobile]) .intro__edition {
  margin: 0 0 20px;
  padding-left: 14px;
  border-left: 2px solid var(--node);
  color: var(--ink-muted);
}
/* 主标题：放大（字号上限保证 15 字符含尾字母 S 一行放下，不换行） */
.atlas:not([data-device=mobile]) .intro__title {
  justify-content: flex-start;
  flex-wrap: nowrap;
  font-size: clamp(40px, 5.4vw, 84px);
  letter-spacing: .08em;
  line-height: 1.06;
  text-shadow: 0 2px 40px #000a;
}
/* 分隔线：横向琥珀渐变条（原 width:0 + fill forwards 动画会覆盖宽度，置 none） */
.atlas:not([data-device=mobile]) .intro__rule {
  width: min(460px, 44vw);
  height: 2px;
  margin: 28px 0 22px;
  background: linear-gradient(90deg, var(--node), #e8a94f00 92%);
  animation: none !important;
  opacity: 1;
}
/* 副标题与正文：左对齐、放宽行距 */
.atlas:not([data-device=mobile]) .intro__sub {
  font-size: 11px;
  letter-spacing: .3em;
  line-height: 2.15;
}
.atlas:not([data-device=mobile]) .intro__cn {
  max-width: 540px;
  font-size: 13.5px;
  line-height: 2;
  margin-top: 16px;
}
/* CTA：胶囊按钮， hover 填充动画继承圆角 */
.atlas:not([data-device=mobile]) .intro__cta {
  margin-top: 34px;
  padding: 14px 40px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .32em;
}
.atlas:not([data-device=mobile]) .intro__cta i {
  border-radius: inherit;
}
.atlas:not([data-device=mobile]) .intro__hint {
  margin-top: 18px;
  font-size: 9.5px;
}
/* 系统状态行：移到左上角竖排（原左下与新内容块冲突） */
.atlas:not([data-device=mobile]) .intro__status {
  left: 5vw;
  top: 40px;
  bottom: auto;
}
/* telemetry（加载脉冲）：接管原状态行的左下角位置 */
.atlas:not([data-device=mobile]) .intro__telemetry {
  left: 5vw;
  bottom: 30px;
}