/* Secondary timeline controls share the selection toolbar's surfaces and rhythm. */
.deepcut {
  --toolbar-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --toolbar-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m12 3 5 5-2 1-3 3v3l-3-3-5 5m5-5-4-4h3l3-3Z' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#editor.deepcut #timeline-history-controls {
  gap:0;padding:0;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);min-height:40px;
}
#editor.deepcut #timeline-history-controls .edit-history-buttons{gap:0;padding:0 3px}
#editor.deepcut #timeline-history-controls .button {
  width:34px;min-height:34px;padding:6px;border:0;border-radius:5px;
  background:transparent;color:var(--text);box-shadow:none;
}
#editor.deepcut #timeline-history-controls .button:disabled{color:var(--muted);opacity:.4}
#editor.deepcut #timeline-history-controls .button:enabled:hover{background:var(--color-action-soft);color:var(--color-action-text)}
#editor.deepcut .edit-history-name>span {
  display:block;width:18px;height:18px;font-size:0;background:currentColor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 4 3 8l4 4M3 8h8a5 5 0 0 1 5 5v3' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
#editor.deepcut #edit-redo .edit-history-name>span{transform:scaleX(-1)}
#editor.deepcut .edit-history-help{border-left:1px solid var(--line)}
#editor.deepcut .edit-history-help summary,
.deepcut #deepcut-timeline-options>summary,
.deepcut #selection-pin {
  display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;
  padding:7px 10px;color:var(--muted);font-size:13px;font-weight:400;line-height:20px;
  border:1px solid var(--line);border-radius:8px;list-style:none;white-space:nowrap;
  background:transparent;cursor:pointer;
}
#editor.deepcut .edit-history-help summary{border:0;border-radius:0 7px 7px 0}
.deepcut #deepcut-timeline-options>summary::-webkit-details-marker{display:none}
.deepcut #deepcut-timeline-options>summary{min-height:40px}
#editor.deepcut .edit-history-help summary::after,
.deepcut #deepcut-timeline-options>summary::after {
  content:'';width:14px;height:14px;flex:none;background:currentColor;
  mask:var(--toolbar-chevron) center/contain no-repeat;
}
#editor.deepcut .edit-history-help[open] summary,
.deepcut #deepcut-timeline-options[open]>summary,
.deepcut #selection-pin[aria-pressed=true] {
  color:var(--color-selection-text);background:var(--color-selection-surface);border-color:var(--color-selection);
}
#editor.deepcut .edit-history-help[open] summary::after,
.deepcut #deepcut-timeline-options[open]>summary::after{transform:rotate(180deg)}
#editor.deepcut .edit-history-help summary:hover,
.deepcut #deepcut-timeline-options>summary:hover,
.deepcut #selection-pin:hover{background:var(--color-action-soft);color:var(--color-action-text)}
.deepcut #selection-pin{min-width:128px;min-height:40px}
.deepcut #selection-pin::before{content:'';width:16px;height:16px;flex:none;background:currentColor;mask:var(--toolbar-pin) center/contain no-repeat}
.deepcut #deepcut-timeline-options>summary::before {
  content:'';width:16px;height:16px;flex:none;background:currentColor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 6h5m4 0h5M3 14h9m4 0h1'/%3E%3Ccircle cx='10' cy='6' r='2'/%3E%3Ccircle cx='14' cy='14' r='2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.deepcut #deepcut-timeline-toolbar>.timeline-scale {
  position:relative;gap:8px;min-height:40px;margin:0;padding:0 8px 0 12px;
  border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:12px;font-weight:400;
}
.deepcut #deepcut-timeline-toolbar>.timeline-scale select {
  min-height:32px;padding:4px 22px 4px 6px;width:58px;border:0;border-radius:5px;
  background:transparent;color:var(--text);font-size:13px;font-weight:500;appearance:none;cursor:pointer;
}
.deepcut #deepcut-timeline-toolbar>.timeline-scale::after {
  content:'';position:absolute;right:12px;width:14px;height:14px;background:var(--muted);
  mask:var(--toolbar-chevron) center/contain no-repeat;pointer-events:none;
}
.deepcut #deepcut-timeline-toolbar>.timeline-scale:focus-within{border-color:var(--color-selection)}
.deepcut #deepcut-timeline-toolbar>.timeline-scale select:hover{background:var(--raised)}
.deepcut #timeline-scale option{background:var(--panel);color:var(--text)}
#editor.deepcut .edit-history-help-content,
.deepcut #deepcut-timeline-menu {
  padding:16px;background:var(--panel);border:1px solid var(--color-selection);
  border-radius:11px;box-shadow:var(--shadow-notice);font-size:13px;line-height:1.6;color:var(--muted);
}
#editor.deepcut .edit-history-help-content strong{color:var(--text);font-weight:500}
#editor.deepcut .edit-history-help-content p{margin:0 0 12px}
#editor.deepcut .edit-history-help-content p:last-child{margin-bottom:0}
.deepcut #deepcut-timeline-menu .timeline-options{gap:12px 8px;margin:0}
.deepcut #deepcut-timeline-menu .timeline-options label{flex-basis:100%;gap:9px;font-size:13px;font-weight:400;line-height:1.5}
.deepcut #deepcut-timeline-menu input[type=checkbox]{width:15px;height:15px;flex:none;accent-color:var(--color-selection)}
.deepcut #deepcut-timeline-menu .timeline-controls{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.deepcut #deepcut-timeline-menu .timeline-clocks{display:grid;gap:6px;font-size:12px}
.deepcut #deepcut-timeline-menu .button{min-height:34px;min-width:38px;border-radius:6px;border-color:var(--line)}
@media(min-width:701px) and (max-height:800px){
  #editor.deepcut #timeline-history-controls,.deepcut #deepcut-timeline-toolbar>.timeline-scale,.deepcut #selection-pin{min-height:36px}
  #editor.deepcut .edit-history-help summary,.deepcut #deepcut-timeline-options>summary{min-height:34px;padding-block:6px}
  .deepcut #deepcut-timeline-options>summary{min-height:36px}
  #editor.deepcut #timeline-history-controls .button{min-height:30px}
}
@media(max-width:900px),(pointer:coarse){
  #editor.deepcut #timeline-history-controls .button{min-height:44px;width:44px}
  #editor.deepcut .edit-history-help summary,.deepcut #deepcut-timeline-options>summary,.deepcut #selection-pin,.deepcut #deepcut-timeline-toolbar>.timeline-scale{min-height:44px}
}
@media(max-width:700px){
  .deepcut #deepcut-timeline-toolbar{column-gap:8px;row-gap:8px}
  .deepcut #selection-pin{min-width:126px}
}
@media(forced-colors:active){
  #editor.deepcut #timeline-history-controls,.deepcut #deepcut-timeline-toolbar>.timeline-scale,.deepcut #deepcut-timeline-options>summary,.deepcut #selection-pin{border-color:ButtonText}
  #editor.deepcut .edit-history-help[open] summary,.deepcut #selection-pin[aria-pressed=true]{outline:1px solid Highlight}
}