/* A single playback row; narrow windows scroll instead of squeezing labels. */
.playback-bar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 9px 10px;
  margin: 4px 0 10px;
  border: 1px solid #cbd3d8;
  border-radius: 4px;
  background: #f7f9fa;
  overflow-x: auto;
}
.playback-bar #autoControls { display: contents; }
.playback-bar .study-mode { order: 1; flex: none; gap: 0; }
.playback-bar .study-mode button { border-radius: 0; }
.playback-bar .study-mode button:first-child { border-radius: 3px 0 0 3px; }
.playback-bar .study-mode button:last-child { border-radius: 0 3px 3px 0; margin-left: -1px; }
.playback-bar button, .playback-bar select { font-size: 12px; white-space: nowrap; padding: 6px 9px; }
.playback-bar .transport {
  display: grid;
  grid-template-columns: max-content 1fr;
  width: calc(13em + 8px + 12px + 1px + 10.75em);
  align-items: center;
  order: 2;
  flex: none;
  flex-wrap: nowrap;
  gap: 8px;
  border-left: 1px solid #d8dfe3;
  padding-left: 12px;
}
.playback-bar .transport > label { display: flex; align-items: center; justify-self: start; margin: 0; white-space: nowrap; }
.playback-bar .transport select { margin-left: 6px; }
.playback-bar #position { font-size: 10px; white-space: nowrap; color: #79858d; }
.playback-bar .playback-options { order: 3; flex: none; flex-wrap: nowrap; margin: 0; gap: 5px; }
.playback-bar .playback-options .follow-option { min-height: 32px; padding: 4px 7px; gap: 6px; font-size: 11px; }
.playback-bar .playback-options select { min-width: 51px; padding: 3px 4px; margin-left: 0; }
.playback-bar .timeline { order: 4; flex: 1 0 240px; gap: 8px; margin: 0; border-left: 1px solid #d8dfe3; padding-left: 12px; }
.playback-bar .timeline-time { font-size: 11px; }
.playback-bar .timeline #progress { min-width: 90px; }

/* Settings open independently of the toolbar's horizontal scrolling. */
.playback-shell{position:relative;flex:none;z-index:4}
.playback-bar .timeline{order:3}
.playback-bar .settings-toggle{order:4;flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:6px;border-color:#b8c9d2;background:#fff;color:#3e5664}
.playback-bar .settings-toggle[aria-expanded="true"]{background:#e4efea;border-color:#82a58d;color:#2e6340}
.settings-panel{position:absolute;right:0;top:calc(100% - 4px);width:min(370px,100%);max-height:none;overflow:visible;padding:16px;background:#fff;border:1px solid #c5d2cb;border-radius:6px;box-shadow:0 12px 30px #203e3026;z-index:5}
.settings-panel h2{font-size:13px;font-weight:600;color:#3c6250;margin:0 0 13px;padding-bottom:11px;border-bottom:1px solid #e7ece9}
.settings-panel .playback-options{display:flex;flex-direction:column;gap:8px;margin:0}
.settings-panel .playback-options .follow-option{width:100%;min-height:43px;padding:9px 11px;font-size:12px;white-space:normal}
.settings-panel .playback-options select{margin-left:auto;min-width:72px}
/* Keep the transport column fixed while the play button fits its contents. */
.playback-bar #play { width: max-content; min-width: 0; justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: left; }
.playback-bar #play::after { content: "Space"; flex: none; padding: 2px 5px; border: 1px solid currentColor; border-radius: 3px; font: 10px/1.2 Arial, sans-serif; opacity: .7; }

/* Code text size is independent of playback and surrounding controls. */
.settings-panel .code-display-options { margin-top: 0; padding-top: 0; }
html[data-code-font-size] .code-scroll pre { font-size: var(--code-font-size); }
html[data-code-font-size] .code-scroll .code-line { min-height: 1.65em; grid-template-columns: max(54px, 4ch) max-content; }
html[data-code-font-size] .code-scroll .line-number { width: max(48px, 4ch - 6px); }

/* Keyboard reference inside playback settings only. */
.settings-panel .shortcut-help { margin-top: 14px; padding-top: 13px; border-top: 1px solid #e7ece9; color: #596570; }
.settings-panel .shortcut-help h2 { margin: 0 0 10px; padding: 0; border-bottom: 0; }
.settings-panel .settings-heading { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.settings-panel .settings-heading svg { width: 16px; height: 16px; flex: none; }
.settings-panel .shortcut-help dl { margin: 0; display: grid; gap: 8px; }
.settings-panel .shortcut-help dl > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 8px; }
.settings-panel .shortcut-help dt, .settings-panel .shortcut-help dd { margin: 0; font-size: 11px; line-height: 1.6; }
.settings-panel .shortcut-help kbd { display: inline-block; padding: 1px 5px; border: 1px solid #ccd3dc; border-radius: 3px; background: #f7f8fa; font: 11px/1.5 Arial, sans-serif; color: inherit; }
.settings-panel .shortcut-help p { margin: 11px 0 0; font-size: 11px; line-height: 1.7; color: #7a838e; }