.alignment-page{min-height:0;display:flex;flex-direction:column;gap:8px}
.alignment-intro{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.alignment-intro h1{font:400 26px/1.15 var(--serif);margin:0 0 4px;letter-spacing:-.4px}
.alignment-intro .eyebrow{margin-bottom:4px}.alignment-intro .muted{font-size:12px}
.save-actions,.mark-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.save-actions .button{min-height:38px;padding:7px 12px}.save-actions .text-button,.save-actions a{font-size:12px}
#editor-status{font-size:11px;line-height:1.4;min-height:1.4em}#editor-status[data-error=true]{color:var(--danger)}
#editor:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:minmax(264px,1fr) auto;gap:12px 16px;min-height:0;flex:1}
#editor-score{grid-column:1;grid-row:1;margin:0;min-height:0;height:100%}
.alignment-panel{border:1px solid var(--line);border-radius:7px;background:var(--surface);min-width:0}
#waveform-panel{grid-column:1;grid-row:2;padding:0;overflow:hidden;margin:0}
.editor-transport{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:10px;padding:4px 12px}
.alignment-page .editor-transport label{min-width:0;flex-direction:row;align-items:center;gap:8px;white-space:nowrap}.editor-transport select{width:auto;flex:1}.editor-transport>.button{height:38px;min-height:38px;padding:7px 12px}
#follow[aria-pressed=true]{background:var(--peach);border-color:var(--selection-line)}
.alignment-page label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink)}
.alignment-page input,.alignment-page select{font:inherit;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:8px;min-width:0;max-width:100%;height:38px;min-height:38px;color:var(--ink)}
#mark-waveform{display:block;width:100%;height:144px;touch-action:none;cursor:crosshair}
.waveform-key{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:10px;padding:5px 12px 7px;margin:0;color:var(--muted)}
.waveform-key span:nth-child(1){color:var(--review)}.waveform-key span:nth-child(2){color:var(--ink)}.waveform-key span:nth-child(3){color:var(--danger)}
#playhead{margin-left:auto;font-variant-numeric:tabular-nums}
.waveform-caption{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11px;line-height:1.3;padding:0 12px 6px;color:var(--muted);min-height:20px}
#playback-location{text-align:right}
#mark-inspector{grid-column:2;grid-row:1/span 2;align-self:stretch;margin:0;min-height:0;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:7px;color:var(--ink)}
#mark-inspector>summary{padding:12px 14px;font-size:12px;line-height:1.4;cursor:pointer;border-bottom:1px solid var(--line)}
#selected-mark-summary{display:block;color:var(--muted);font-size:11px;margin-top:4px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#mark-inspector .inspector-body{padding:12px 14px}
.mark-navigation{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;grid-template-areas:'. caption .' 'previous selector next' 'review review review';align-items:end;column-gap:6px;row-gap:5px}
.mark-navigation>label{grid-area:caption;margin:0;min-width:0}.mark-navigation>button{height:38px;min-height:38px;padding:0}
#previous-mark{grid-area:previous}#next-mark{grid-area:next}#mark-select{grid-area:selector;width:100%;font-size:11px}
#review-count{grid-area:review;font-size:11px;line-height:1.4;margin-top:3px}
.mark-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:9px;margin:14px 0}
.mark-fields input,.mark-fields select{width:100%}.mark-fields label:has(#timestamp){grid-column:1/span 2}
#apply-time{min-height:38px;padding:8px;font-size:12px}#use-playhead{grid-column:1/-1}
.mark-actions{gap:8px}.mark-actions .button{min-height:38px;padding:8px 10px;font-size:12px}.mark-actions .text-button{font-size:12px}
#selected-description{flex-basis:100%;font-size:11px;line-height:1.5}
.timing-nudges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0;font-size:11px}
.timing-nudges .button{min-height:38px;padding:8px 12px}
.alignment-explanation{font-size:12px;line-height:1.6;max-width:85ch}
.alignment-page button:focus-visible,.alignment-page a:focus-visible,#mark-waveform:focus-visible,#mark-inspector>summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:1099px){
  #editor:not([hidden]){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(264px,1fr) auto auto;gap:8px}
  #mark-inspector{grid-column:1;grid-row:3;align-self:start;max-height:none;overflow:visible}
  #mark-inspector[open] .inspector-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  #mark-inspector[open] .mark-navigation{grid-column:1}.mark-fields{margin:0}
  #mark-inspector[open] .mark-actions{grid-column:2;grid-row:1/span 2}
}
@media(max-width:650px){
  .alignment-page{gap:6px}.alignment-intro{gap:8px}.alignment-intro h1{font-size:22px}.alignment-intro .eyebrow{display:none}
  .alignment-intro .muted{font-size:11px}.save-actions{gap:6px}.save-actions .button{padding:7px 10px;min-height:36px;font-size:12px}
  .editor-transport{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:6px;padding:4px 8px}
  .alignment-page .editor-transport label{font-size:10px;line-height:1.2;flex-direction:column;align-items:stretch;gap:3px;white-space:normal}
  .editor-transport>.button{font-size:11px;line-height:1.2;padding:4px 6px;height:36px;min-height:36px;max-width:100px}
  .waveform-key{gap:8px;padding:4px 8px;font-size:9px}.waveform-caption{font-size:10px;padding:0 8px 5px;min-height:18px}
  #mark-inspector>summary{padding:7px 12px;font-size:11px}#selected-mark-summary{margin-top:2px;font-size:10px;line-height:1.3}.mark-fields{margin:12px 0}
  #mark-inspector[open] .inspector-body{display:block;padding:12px}
  .mark-navigation>button,.alignment-page input,.alignment-page select{height:42px;min-height:42px}
  .editor-transport input,.editor-transport select{font-size:12px;padding:6px;height:36px;min-height:36px}
  #mark-inspector button{min-height:42px}.timing-nudges .button{min-width:80px}
}