/* 时间指示色：过去海蓝/现在陶橙/未来藤紫，由时间轴和流年年份色签复用。仅屏幕生效。 */
@media screen {
  .decade-guide, .timeline-legend, #yearly-settings-panel {
    --timeline-past-bg:#1D5781;
    --timeline-past-border:#7DC8ED;
    --timeline-past-text:#E9F5FF;
    --timeline-past-label:#D4EAF9;
    --timeline-current-bg:#954E2F;
    --timeline-current-border:#F0B589;
    --timeline-current-text:#FFF2E7;
    --timeline-current-label:#FFE2CB;
    --timeline-future-bg:#524372;
    --timeline-future-border:#B79AD6;
    --timeline-future-text:#F5EFFF;
    --timeline-future-label:#E4D7F6;
    --timeline-selection:#FFE0A0;
    --timeline-selected-line:#35E58C;
  }
  :root[data-theme="light"] :is(.decade-guide, .timeline-legend, #yearly-settings-panel) {
    --timeline-past-bg:#CBE9FB;
    --timeline-past-border:#71BAE9;
    --timeline-past-text:#154F77;
    --timeline-past-label:#326181;
    --timeline-current-bg:#FBD3BD;
    --timeline-current-border:#DC895A;
    --timeline-current-text:#843D1C;
    --timeline-current-label:#894821;
    --timeline-future-bg:#E6DAF4;
    --timeline-future-border:#B69AD9;
    --timeline-future-text:#563975;
    --timeline-future-label:#684D86;
    --timeline-selection:#895B21;
    --timeline-selected-line:#009E57;
  }
  #configure-view #yearly-settings-panel .line-field:has(#target-start-year) { position:relative; }
  #configure-view #yearly-settings-panel #target-start-year { padding-right:62px; }
  #configure-view #yearly-settings-panel .line-field:has(#target-start-year)::after { display:none; position:absolute; right:6px; top:50%; transform:translateY(-50%); width:52px; height:23px; border:1px solid; border-radius:3px; font:400 11px/21px var(--sans); letter-spacing:0; text-align:center; pointer-events:none; }
  #configure-view #yearly-settings-panel .line-field:has(#target-start-year[data-time-state="past"])::after { content:"过去"; display:block; background:var(--timeline-past-bg); border-color:var(--timeline-past-border); color:var(--timeline-past-text); }
  #configure-view #yearly-settings-panel .line-field:has(#target-start-year[data-time-state="current"])::after { content:"现在"; display:block; background:var(--timeline-current-bg); border-color:var(--timeline-current-border); color:var(--timeline-current-text); }
  #configure-view #yearly-settings-panel .line-field:has(#target-start-year[data-time-state="future"])::after { content:"未来"; display:block; background:var(--timeline-future-bg); border-color:var(--timeline-future-border); color:var(--timeline-future-text); }
  :root[data-theme="light"] #configure-view #yearly-timeline-panel > .panel-title h2,
  :root[data-theme="light"] :is(.decade-guide, #configure-view #yearly-decade-guide) :is(.decade-guide-heading h2,.timeline-row-label span,.selected-decade-meta strong) {
    color:#17386D;
  }
  .decade-guide [data-time-state="past"] {
    --timeline-card-bg:var(--timeline-past-bg);
    --timeline-card-border:var(--timeline-past-border);
    --timeline-card-text:var(--timeline-past-text);
    --timeline-card-label:var(--timeline-past-label);
  }
  .decade-guide [data-time-state="current"] {
    --timeline-card-bg:var(--timeline-current-bg);
    --timeline-card-border:var(--timeline-current-border);
    --timeline-card-text:var(--timeline-current-text);
    --timeline-card-label:var(--timeline-current-label);
  }
  .decade-guide [data-time-state="future"] {
    --timeline-card-bg:var(--timeline-future-bg);
    --timeline-card-border:var(--timeline-future-border);
    --timeline-card-text:var(--timeline-future-text);
    --timeline-card-label:var(--timeline-future-label);
  }
  /* 覆盖桌面/手机原有 current、selected 和 hover 颜色，不更改几何属性。 */
  :is(.decade-guide, #configure-view #yearly-decade-guide) :is(.decade-range,.decade-year)[data-time-state] {
    background:var(--timeline-card-bg);
    border-color:var(--timeline-card-border);
    color:var(--timeline-card-text);
    box-shadow:none;
  }
  :is(.decade-guide, #configure-view #yearly-decade-guide) [data-time-state] :is(.decade-ganzhi,.decade-years-range,strong,em) {
    color:var(--timeline-card-text);
  }
  :is(.decade-guide, #configure-view #yearly-decade-guide) [data-time-state] small {
    color:var(--timeline-card-label);
  }
  :is(.decade-guide, #configure-view #yearly-decade-guide) [data-time-state]:hover {
    border-color:var(--timeline-selection);
  }
  /* 大限和流年统一用框外底线表示选中；键盘焦点与选中状态分开。 */
  :is(.decade-guide, #configure-view #yearly-decade-guide) [data-time-state]:focus-visible {
    outline:2px solid var(--timeline-selection);
    outline-offset:-3px;
  }
  :is(.decade-guide, #configure-view #yearly-decade-guide) :is(.decade-range,.decade-year)[data-time-state] {
    position:relative;
    overflow:visible;
  }
  :is(.decade-guide, #configure-view #yearly-decade-guide) :is(.decade-range,.decade-year)[data-time-state].selected {
    outline:none;
    border-color:var(--timeline-card-border);
  }
  :is(.decade-guide, #configure-view #yearly-decade-guide) :is(.decade-range,.decade-year)[data-time-state].selected::after {
    content:"";
    position:absolute;
    left:-1px;
    right:-1px;
    /* 计入 1px 卡片边框与半条线高，让线中心位于下方留白的中点。 */
    bottom:calc(-1.75px - var(--timeline-line-space, 4.5px) / 2);
    height:1.5px;
    background:var(--timeline-selected-line);
    pointer-events:none;
  }
}

/* 配置时间轴：沿用原留白总高，将滚动容器外的留白移入，避免底线被裁切。 */
@media screen {
  #configure-view #yearly-decade-guide .decade-range { --timeline-line-space:14px; }
  #configure-view #yearly-decade-guide .decade-year { --timeline-line-space:23px; }
}
@media screen and (min-width:681px) and (max-width:980px) {
  #configure-view #yearly-decade-guide .selected-decade-panel { padding-bottom:0; align-self:end; }
  #configure-view #yearly-decade-guide .decade-year-grid { padding-bottom:23px; }
}
@media screen and (max-width:680px) {
  #configure-view #yearly-decade-guide .decade-timeline-row { padding-bottom:0; }
  #configure-view #yearly-decade-guide .decade-range-list { padding-bottom:10px; }
  #configure-view #yearly-decade-guide .decade-range { --timeline-line-space:10px; }
  #configure-view #yearly-decade-guide .decade-year { --timeline-line-space:6px; }
}
@media screen and (min-width:981px) {
  #configure-view #yearly-decade-guide .decade-timeline-row { padding-bottom:0; }
  #configure-view #yearly-decade-guide .decade-range-list { padding-bottom:22px; }
  #configure-view #yearly-decade-guide .decade-range { --timeline-line-space:22px; }
  /* 桌面流年分两排：首排底线居于行间，末排居于卡片与分割线之间。 */
  #configure-view #yearly-decade-guide .decade-year { --timeline-line-space:8px; }
  #configure-view #yearly-decade-guide .decade-year:nth-last-child(-n+5) { --timeline-line-space:14px; }
}

@media screen {
  #configure-view #yearly-timeline-panel > .panel-title { align-items:center; flex-wrap:wrap; gap:8px; }
  #configure-view #report-options-panel .timeline-heading-copy { min-width:0; }
  #configure-view #report-options-panel .timeline-legend { display:flex; flex:0 0 auto; gap:3px; margin-left:auto; }
  #configure-view #report-options-panel:has(#yearly-timeline-details[hidden]) .timeline-legend { display:none; }
  .timeline-legend > span { padding:3px; border:1px solid; border-radius:3px; font:10px/1.2 var(--sans); white-space:nowrap; }
  .timeline-legend .legend-past { background:var(--timeline-past-bg); border-color:var(--timeline-past-border); color:var(--timeline-past-text); }
  .timeline-legend .legend-current { background:var(--timeline-current-bg); border-color:var(--timeline-current-border); color:var(--timeline-current-text); }
  .timeline-legend .legend-future { background:var(--timeline-future-bg); border-color:var(--timeline-future-border); color:var(--timeline-future-text); }
}
@media print {
  .timeline-legend { display:none; }
}