/* 多轨帧编辑器：CSS 变量由 event-editor.js 写入播放头位置，颜色仅区分事件种类。 */
#timeline {
  --axis-label: 91px;
  --clip-line: #363d43;
  --clip-low: #171c20;
  --clip-fg: #dce4e8;
  --clip-dim: #a7b1b9;
  --clip-mint: #b0dfc3;
  color: var(--clip-fg);
  min-width: 0;
  padding: 10px 14px 8px;
}
#timeline button, #timeline input { font: inherit; }
#timeline button, #timeline input[type="number"] {
  color: var(--clip-fg); background: #282e33; border: 1px solid #434c54;
  border-radius: 4px; min-height: 29px; font-size: 12px;
}
#timeline button { cursor: pointer; }
#timeline button:hover { border-color: #89a293; }
#timeline button:focus-visible, #timeline input:focus-visible { outline: 2px solid #e9ca87; outline-offset: 2px; }
#timeline button:disabled { cursor: default; opacity: .55; }
#timeline input[type=number] { width: 48px; text-align: center; padding: 2px 4px; font: 12px Consolas, monospace; appearance: textfield; }
#timeline input[type=number]::-webkit-inner-spin-button { appearance: none; }
#timeline label { display: inline-flex; align-items: center; gap: 5px; color: var(--clip-dim); font-size: 12px; }
.clip-toolbar, .clip-properties, .clip-transport, .clip-tools, .event-heading { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.clip-toolbar { justify-content: space-between; }
.clip-toolbar .clip-transport button { color: var(--clip-mint); border-color: #587963; }
.clip-tools { margin: 8px 0; gap: 5px; }
#timeline .clip-tools button { background: #252b30; }
.clip-tools [data-add=hit] { color: #efbd88 !important; }
.clip-tools #append-motion { color: #aedac0; }
.clip-tools [data-add=effect] { color: #9aded1 !important; }
.clip-tools [data-add=sound] { color: #cab2e7 !important; }
#timeline .clip-tools :is([data-add],[data-tool]) { cursor: grab; touch-action: none; user-select: none; }
#timeline .clip-tools .dragging { cursor: grabbing; opacity: .65; }
.clip-tools [data-add=shake] { color: #f0b59c !important; }
#timeline .event-block[data-type=shake] { --accent: #f0b59c; --fill: #4a352e; }
.track-scroll { overflow: clip; border: 1px solid var(--clip-line); border-radius: 4px; }
.track-sheet { min-width: 0; background: #171c20; }
.track-ruler, .event-lane { display: grid; grid-template-columns: var(--axis-label) minmax(0,1fr); }
.ruler-name, .lane-name { display: flex; align-items: center; justify-content: space-between; position: sticky; left: 0; z-index: 2; background: #272e34; padding-inline: 8px; border-right: 1px solid var(--clip-line); }
.ruler-name { color: var(--clip-dim); font: 11px Consolas, monospace; }
.ruler-name small { font-size: 9px; }
.track-ruler { min-height: 29px; border-bottom: 1px solid var(--clip-line); }
.ruler-body, .lane-body { margin-right: 12px; position: relative; min-width: 0; }
.ruler-body { height: 29px; }
#frame-ticks { position: absolute; inset: 0; }
#frame-ticks span { position: absolute; top: 4px; color: #bac8bf; font: 10px Consolas, monospace; transform: translateX(-50%); }
#frame-ticks span:first-child { transform: translateX(2px); }
#frame-ticks span::after { content: ""; display: block; width: 1px; height: 4px; background: #718477; margin: 2px auto; }
#timeline #time-scrub { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; touch-action: none; cursor: ew-resize; }
.ruler-body:focus-within { box-shadow: inset 0 0 0 1px #e9ca87; }
.ruler-body::after { content: ""; position: absolute; left: var(--playhead); bottom: 0; transform: translateX(-50%); background: #e1c18c; width: 9px; height: 8px; clip-path: polygon(0 0,100% 0,100% 45%,50% 100%,0 45%); }
.event-lane { min-height: 36px; border-bottom: 1px solid #353d43; }
.event-lane:last-child { border: 0; }
.event-lane:nth-child(even) { background: #20262b; }
.lane-name { color: #b6c3c9; font-size: 12px; }
#timeline .lane-name button { width: 100%; background: none; border: 0; padding: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#timeline .lane-name button[data-remove-track] { width: 18px; flex: none; text-align: center; }
.event-lane[data-selected=true] .lane-name { background: #303b3e; box-shadow: inset 3px 0 #9dcfae; }
.lane-body { background-image: linear-gradient(90deg,#81909d58 1px,transparent 1px),linear-gradient(90deg,#8495a021 1px,transparent 1px); background-size: var(--grid-step) 100%,var(--frame-step) 100%; }
.lane-body::after { content: ""; position: absolute; z-index: 4; pointer-events: none; left: var(--playhead); top: 0; bottom: 0; width: 1px; background: #e4c08db5; }
.lane-body[data-drop-frame] { box-shadow: inset 0 0 0 1px var(--clip-mint); }
.lane-body[data-drop-frame]::before { content: attr(data-drop-frame); position: absolute; z-index: 6; pointer-events: none; top: 0; bottom: 0; left: var(--drop-at); border-left: 2px solid var(--clip-mint); background: #244735e8; color: #e3f7e7; padding: 3px; font: 11px Consolas, monospace; white-space: nowrap; }
.lane-body[data-drop-end]::before { transform: translateX(-100%); border-left: 0; border-right: 2px solid var(--clip-mint); }
.lane-body[data-drop-span]::after { left: var(--span-left); width: var(--span-width); top: 3px; bottom: 3px; border: 1px dashed var(--clip-mint); background: #9ed9b82d; }
.library-list button[draggable=true] { cursor: grab; }
#timeline .event-block { --accent: #f2bd89; --fill: #4c3d2c; position: absolute; min-height: 23px; height: 23px; min-width: 6px; border-radius: 3px; border: 1px solid var(--accent); color: var(--accent); background: var(--fill); touch-action: none; user-select: none; cursor: grab; padding: 0 5px; font-size: 11px; line-height: 1.2; text-align: center; }
#timeline .event-block[data-type=motion] { --accent: #a2d4b7; --fill: #2e4136; }
#timeline .event-block[data-type=effect] { --accent: #9dc6e9; --fill: #293847; }
#timeline .event-block[data-type=sound] { --accent: #c8abe5; --fill: #3b3245; }
#timeline .event-block[data-type=chainCancel] { --accent: #a9cf85; --fill: #354430; }
#timeline .event-block[data-type=moveCancel] { --accent: #8ec6df; --fill: #293d47; }
.event-block small { padding-left: 4px; font: 9px Consolas, monospace; opacity: .9; }
.event-block span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#timeline .event-block.point-event { z-index: 2; width: auto; max-width: min(102px,48%); padding-left: 7px; border-left-width: 2px; }
#timeline .event-block[data-bound=true] { border-style: dashed; border-left-style: solid; }
.point-handle { position: absolute; left: -9px; top: -3px; bottom: -3px; width: 16px; cursor: grab; }
.point-handle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: var(--accent); transform: translate(-50%,-50%) rotate(45deg); }
#timeline .event-block.late-point { translate: -100% 0; padding-left: 5px; padding-right: 7px; border-left-width: 1px; border-right-width: 2px; }
.late-point .point-handle { left: auto; right: -9px; }
#timeline .event-block[aria-pressed=true] { box-shadow: 0 0 0 2px #ebf4e9; z-index: 3; }
.event-block [data-edge] { position: absolute; top: 0; bottom: 0; width: min(8px,25%); cursor: ew-resize; z-index: 1; }
.event-block i[data-edge=start] { left: 0; border-left: 2px solid var(--accent); }
.event-block i[data-edge=end] { right: 0; border-right: 2px solid var(--accent); }
#timeline .event-block.dragging { pointer-events: none; opacity: .45; }
.track-scroll:has(.event-block.dragging), .track-scroll:has(.event-block.dragging) * { cursor: grabbing; }
#track-feedback { font-size: 11px; }
#track-feedback:empty { display: none; }
#track-feedback { color: #efc892; }
.event-heading { justify-content: space-between; }
.event-heading > div { display: flex; align-items: baseline; gap: 8px; }
.event-heading small { color: var(--clip-dim); font-size: 11px; }
.event-heading h3 { margin: 0; font-size: 14px; color: var(--clip-fg); }
#timeline #delete-event { color: #edb5a2; background: none; }
/* 轨道高度由分隔线决定。分页只决定哪些轨道与层可见，不改写事件数据或定位坐标。 */
#timeline { display: grid; grid-template-columns: minmax(0,1fr) 7px var(--inspector,28vw); column-gap: 3px; grid-template-rows: minmax(0,1fr) auto; min-height: 0; padding: 6px 10px 2px; }
.track-workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.clip-toolbar, .clip-tools, .track-ruler { flex: none; }
.clip-tools { margin: 4px 0; }
.track-scroll { overflow: clip; min-height: 0; flex: 1; }
.track-sheet { min-width: 0; height: 100%; }
.track-ruler { min-height: 26px; } .ruler-body { height: 26px; }
.event-lane .lane-body { min-height: var(--page-lane-height,38px) !important; }
.event-block { margin-top: var(--page-lane-offset,0px); }
#track-feedback { grid-column: 1/-1; margin: 0; line-height: 1.2; }
#timeline .page-nav button { min-height: 22px; }
#event-inspector { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 0 0 0 9px; margin: 0; border: 0; border-left: 1px solid var(--clip-line); }
.event-heading { flex: none; min-height: 29px; margin-bottom: 6px; gap: 4px; }
.event-heading > div, .event-heading h3 { min-width: 0; }
.event-heading h3 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.event-heading small { white-space: nowrap; }
/* 分类始终在字段上方；字段与选项按可用宽度换列，布局按实际行高分页。 */
#event-groups { flex: none; flex-wrap: wrap; gap: 4px; padding-bottom: 6px; margin-bottom: 5px; border-bottom: 1px solid var(--clip-line); }
#timeline #event-groups button { min-height: 27px; padding: 1px 12px; }
#timeline #event-groups button[aria-pressed=true] { background: #304239; color: var(--clip-mint); border-color: #5b806b; }
.event-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#event-fields { flex: 1; min-height: 0; display: grid; align-content: start; grid-auto-rows: 32px; grid-template-columns: repeat(auto-fill,minmax(min(270px,100%),1fr)); gap: 4px 14px; }
#event-fields label { display: flex; min-width: 0; justify-content: space-between; gap: 8px; font-size: 12px; }
#event-fields button { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#event-fields label button, #event-fields input[type=number] { width: min(48%,128px); }
#event-fields label button { color: var(--clip-mint); }
#event-inspector[data-choosing] #event-fields { grid-template-columns: repeat(auto-fill,minmax(min(102px,100%),1fr)); gap: 4px; }
#event-fields > button[aria-pressed=true] { border-color: #739b83; background: #304239; color: var(--clip-mint); }
#delete-event { align-self: flex-start; flex: none; }
#event-empty { display: grid; place-items: center; flex: 1; margin: 0; color: var(--clip-dim); font-size: 13px; }
#event-inspector:not([data-empty]) #event-empty,
#event-inspector[data-empty] :is(#close-event,#event-groups,.event-content),
#event-inspector:is([data-empty],[data-choosing]) .event-heading small { display: none; }
@media (max-width: 820px), (max-height: 620px) {
  #timeline { min-width: 0; padding: 4px 7px 2px; --axis-label: clamp(62px,18vw,82px); grid-template-columns: minmax(0,1fr); gap: 0; }
  #timeline .clip-properties, #timeline:not([data-sequence=event]) #event-inspector,
  #timeline[data-sequence=event] .track-workspace, #timeline[data-sequence=properties] .track-workspace > :not(.clip-toolbar),
  #timeline[data-sequence=properties] .clip-transport { display: none; }
  #timeline[data-sequence=properties] .clip-properties { display: grid; width: min(100%,420px); gap: 9px; }
  .clip-properties label { justify-content: space-between; }
  #timeline #event-inspector { border: 0; padding: 0; }
  .track-sheet { min-width: 0; }
  .clip-tools { gap: 4px; }
  .clip-transport { gap: 4px; }
  .clip-tools button { font-size: 11px; }
  .event-heading { min-height: 29px; }
}
@media (max-height: 380px) and (max-width: 520px) {
  #timeline[data-sequence=tracks] .clip-toolbar { display: none; }
  #timeline[data-sequence=properties] .clip-toolbar { display: grid; gap: 4px; }
  #timeline[data-sequence=properties] .clip-transport { display: flex; }
  #timeline[data-sequence=properties] .clip-properties { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
}