/* Same 34px main band as the original Chinese timeline; two compact comparison rows. */
#scrubber-track.wwm-timelines { margin-left:116px; display:flex; flex-direction:column; gap:3px; background:transparent; box-shadow:none; }
.wwm-timelines .wwm-timeline-row, .wwm-timelines #dynasty-bands { position:relative; display:block; height:20px; min-height:20px; overflow:hidden; border-radius:5px; }
.wwm-timelines .wwm-timeline-row.is-primary { height:34px; min-height:34px; }
.wwm-timelines .band-cell { position:absolute; top:0; bottom:0; box-sizing:border-box; font-size:10px; }
.wwm-timelines .is-primary .band-cell { font-size:12px; }
.wwm-timelines #dynasty-bands:not(.is-primary) .band-phase-tick, .wwm-timelines #dynasty-bands:not(.is-primary) .band-ev-dot { display:none; }
.wwm-timelines .band-cell.is-narrow .band-label { visibility:hidden; }
.wwm-timeline-tools { position:absolute; left:0; width:110px; display:flex; flex-direction:column; gap:3px; }
.wwm-row-tools { display:flex; align-items:center; height:20px; gap:1px; }
.wwm-row-tools.is-primary { height:34px; }
.wwm-row-tools button { border:0; background:transparent; color:#71634f; padding:0; cursor:pointer; height:100%; }
.wwm-row-tools .wwm-row-name { flex:1; text-align:left; font:600 11px var(--sans-stack); padding:0 6px; border-radius:5px; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.wwm-row-name::before { content:'⠿'; display:inline-block; margin-right:5px; color:#9d8a70; }
.wwm-row-tools.is-primary .wwm-row-name { color:#8c442d; }
.wwm-row-tools button:hover:not(:disabled) { background:#fff7; }
.wwm-row-tools.is-dragging { position:relative; z-index:5; }
.wwm-row-tools.is-dragging .wwm-row-name { cursor:grabbing; background:#fff8e9; color:#8c442d; box-shadow:0 4px 12px #59412b40,0 0 0 2px #ac7654; }
.wwm-timeline-row.is-dragging { opacity:.55; }
.wwm-row-tools.is-drop-target { background:#b8794b24; border-radius:5px; }
.wwm-row-tools.is-drop-target:not(.is-dragging) .wwm-row-name { visibility:hidden; }
.wwm-timelines .wwm-timeline-row.is-drop-target { outline:2px solid #9c553c; outline-offset:0; }
.wwm-drag-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.wwm-row-tools button:focus-visible, .wwm-primary-detail :focus-visible { outline:2px solid #9c553c; outline-offset:2px; }
.wwm-timelines ~ #scrubber-ticks { margin-left:116px; }
.wwm-primary-detail { margin-top:8px; border-top:1px solid #b9a88b66; padding-top:7px; min-width:0; }
.wwm-detail-head { display:flex; gap:7px; align-items:center; }
.wwm-detail-title { font:600 12px var(--serif-stack); color:var(--period-color); flex-shrink:0; }
.wwm-primary-detail select { background:#f8f3e7; border:1px solid #b9a88b99; border-radius:4px; padding:3px 5px; color:#504532; font-size:11px; min-width:0; max-width:40%; }
.wwm-ruler-select { flex:1; }
.wwm-reign-status { font:12px var(--serif-stack); color:#534631; line-height:1.6; margin:5px 0; overflow-wrap:anywhere; }
.wwm-reign-strip { display:flex; gap:1px; height:34px; border-radius:4px; overflow:hidden; }
.wwm-reign-cell { border:0; min-width:0; padding:0 2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:11px var(--serif-stack); color:#fffaf0; opacity:.65; cursor:pointer; }
.wwm-reign-cell.is-active { opacity:1; box-shadow:inset 0 -3px #fff8; }
.wwm-reign-cell:hover { opacity:1; }
.wwm-reign-year { display:block; width:100%; margin:6px 0 3px; height:12px; accent-color:var(--period-color); cursor:ew-resize; }
.wwm-reign-note { color:#81725e; font-size:10px; line-height:1.5; }
.wwm-reign-note a { color:#89523b; }
.wwm-primary-detail [hidden] { display:none; }
#scrubber-Bubble { max-width:100%; box-sizing:border-box; overflow:hidden; text-overflow:ellipsis; }
#atlas-svg .polity-shape.neighbor.wwm-period-polity,
#atlas-svg.terrain-active .polity-shape.neighbor.wwm-period-polity,
#atlas-svg .neighbor-shape.wwm-period-polity,
#atlas-svg.terrain-active .neighbor-shape.wwm-period-polity { fill:color-mix(in srgb,var(--wwm-period) 32%,transparent); stroke:var(--wwm-period); }
#atlas-svg .polity-shape.neighbor.wwm-period-polity:hover,
#atlas-svg.terrain-active .polity-shape.neighbor.wwm-period-polity:hover,
#atlas-svg .neighbor-shape.wwm-period-polity:hover { fill:color-mix(in srgb,var(--wwm-period) 38%,transparent); }
@media(max-width:900px) {
  .wwm-timelines .wwm-timeline-row.is-primary, .wwm-row-tools.is-primary { height:30px; min-height:30px; }
}
@media(max-width:640px) {
  #scrubber-dock { gap:6px; padding:8px; }
  #scrubber-track.wwm-timelines, .wwm-timelines ~ #scrubber-ticks { margin-left:98px; }
  .wwm-timeline-tools { width:94px; }
  .wwm-row-tools .wwm-row-name { font-size:10px; padding:0 3px; }
  .wwm-detail-head { flex-wrap:wrap; gap:4px; }
  .wwm-detail-title { font-size:11px; flex-basis:100%; }
  .wwm-primary-detail select { font-size:10px; max-width:100%; }
  .wwm-period-select { flex:1 1 45%; }
  .wwm-lane-select { flex:1 1 45%; }
  .wwm-ruler-select { flex:1 1 100%; }
  .wwm-reign-status { font-size:11px; }
  .wwm-reign-note { font-size:9px; }
}
