/* Found Footage: quiet controls beside the two moving pictures, using the existing deck palette. */
.ff-nav { display: flex; gap: 4px; position: sticky; top: -14px; z-index: 3; background: var(--panel); padding: 8px 0 14px; }
.ff-nav button { flex: 1; padding: 7px 5px; font-size: 11px; }
.ff-focus[hidden] { display: none; }
body[data-workbench=animation] .rail > :not(.ff-nav):not(.ff-focus) { display: none !important; }
body[data-workbench=picture] #groups > [data-stage=body] { display: none !important; }
body[data-workbench=picture] #simpleAll { display: none; }
body[data-workbench=animation] .app { grid-template-columns: minmax(0, 1fr) 372px; }
.ff-focus { --ff-muted: #a0abb3; font: 13px/1.45 "Segoe UI", sans-serif; }
.ff-intro { margin: 0 0 12px; }
.ff-intro h1 { font: 600 23px/1.2 var(--ui-font); margin: 0; color: var(--text); }
.ff-intro p, .ff-note, .ff-hint { color: var(--ff-muted); margin: 0; font-size: 12px; }
.ff-choose { display: grid; gap: 7px; margin-bottom: 10px; font-weight: 600; }
.ff-choose select { appearance: auto; width: 100%; padding: 11px; font: 17px "Segoe UI", sans-serif; background: var(--panel-2); color: var(--text); border: 1px solid var(--line-2); border-radius: 5px; }
.ff-choose select:focus-visible, .ff-picker summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.ff-transport { display: flex; gap: 7px; margin-bottom: 10px; }
.ff-transport button { flex: 1; font: 12px "Segoe UI", sans-serif; padding: 8px; }
.ff-actions { display: flex; gap: 6px; margin: 0 0 12px; }
.ff-actions button { flex: 1; font: 12px "Segoe UI", sans-serif; padding: 6px; }
.ff-control-guide { position:absolute; z-index:3; left:14px; bottom:14px; max-width:calc(100% - 28px); padding:7px 10px; border:1px solid #ffffff24; border-radius:5px; background:#141511bd; color:#eee8d7; font:12px/1.5 "Segoe UI",sans-serif; white-space:pre-line; pointer-events:none; }
.ff-control-guide[hidden] { display:none; }
.ff-control-guide.ff-inline { position:static; max-width:none; margin:10px 0; }
.ff-live { margin: 10px 0 16px; color: var(--amber); font-size: 12px; min-height: 18px; }
.ff-live::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); margin: 0 7px 2px 1px; }
.ff-focus .ff-section { border-top: 1px solid var(--line); margin: 0; padding: 13px 0 14px; }
.ff-recording { padding-bottom: 16px; }
.ff-focus .ff-section h2, .ff-section > summary { font: 600 14px/1.5 "Segoe UI", sans-serif; margin: 0 0 4px; color: #e5dac3; text-transform: none; letter-spacing: 0; }
.ff-section > summary { cursor: pointer; margin: 0; }
.ff-section[open] > summary { margin-bottom: 10px; }
.ff-section .ff-note { margin-bottom: 8px; }
.ff-borrowed.dial { margin: 11px 0 0; padding: 0; border: 0; grid-template-columns: minmax(0,1fr) auto auto; gap: 4px 8px; }
.ff-borrowed.dial .name { font: 13px/1.5 "Segoe UI", sans-serif; color: #ddd4c1; text-transform: none; letter-spacing: 0; }
.ff-borrowed.dial .val { font-size: 12px; color: #e4c991; }
.ff-borrowed.dial > input[type=range] { width: 100%; margin: 0; min-height: 24px; }
.ff-borrowed.dial > .only { display: none; }
.ff-borrowed.dial > .back { grid-column: 3; }
.ff-borrowed .seg { display: flex; flex-wrap: wrap; gap: 5px; }
.ff-borrowed .seg button { flex: 1 1 auto; padding: 8px 6px; font: 12px "Segoe UI", sans-serif; white-space: normal; overflow-wrap: anywhere; }
.ff-borrowed .seg[hidden] { display: none; }
.ff-borrowed[data-inactive=true] { opacity: .52; }
.ff-borrowed[data-unavailable]::after { content: attr(data-unavailable); grid-column: 1/-1; color: var(--ff-muted); font-size: 11px; }
.ff-fine { margin-top: 14px; }
.ff-fine > summary { color: var(--ff-muted); cursor: pointer; font-size: 12px; }
.ff-rhythm { background: var(--panel-2); border-radius: 4px; margin-top: 14px; padding: 10px 10px 13px; font-size: 12px; color: var(--muted); position: relative; overflow: hidden; }
.ff-rhythm::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--motion-level,0%); background: var(--amber); }
.ff-picker { grid-column: 1/-1; position: relative; min-width: 0; }
.ff-picker > summary { cursor: pointer; list-style-position: inside; border: 1px solid var(--line-2); background: var(--panel-2); padding: 10px; border-radius: 4px; overflow-wrap: anywhere; color: var(--text); }
.ff-picker > input { width: 100%; font: inherit; margin: 7px 0; background: #17140f; color: var(--text); border: 1px solid var(--line-2); border-radius: 3px; padding: 9px; }
.ff-pick-list { max-height: 230px; overflow-y: auto; display: grid; gap: 4px; }
.ff-pick-list button { text-align: left; font: inherit; overflow-wrap: anywhere; padding: 9px; }
.ff-save { border-top: 1px solid var(--line); padding: 16px 0; }
.ff-save > summary { cursor: pointer; color: #d8cbb2; }
.ff-save .tools { margin: 12px 0; }
.ff-save button { font: 12px "Segoe UI", sans-serif; }
.ntsc-files { margin: 8px 0; }
.ff-hint { padding: 0 0 14px; line-height: 1.8; }
.ff-legacy { border: 1px solid #6b5430; background: #272014; padding: 12px; margin-bottom: 15px; border-radius: 5px; }
.ff-legacy[hidden] { display: none; }
.ff-old-timing { font: 12px/1.5 "Segoe UI", sans-serif; color: var(--text); padding: 0 0 12px; }
.ff-old-timing[hidden] { display: none; }
.ff-old-timing p { margin: 0 0 6px; }
.dial[data-inactive=true] { opacity: .52; }
.ff-legacy p { margin: 0 0 8px; }
.ff-focus .typein { font: 13px var(--ui-font); min-width: 70px; max-width: 110px; }
@media (max-width: 850px) {
  body[data-workbench=animation] .app { grid-template-columns: minmax(0,1fr) 326px; }
  .bar { height: auto; flex-wrap: wrap; gap: 7px; padding: 8px 12px; }
  body[data-workbench] .app { grid-template-rows: auto minmax(0,1fr); }
}
@media (max-width: 650px) {
  body[data-workbench] .app { height: auto; min-height: 100vh; grid-template-columns: minmax(0,1fr); grid-template-rows: auto 42vh auto; }
  body[data-workbench] .bar { grid-column: 1; }
  body[data-workbench] main.stage { min-height: 0; }
  .app:has(.stage.compare) { grid-template-rows:auto 720px auto; }
  .stage.compare #tape { left:0; top:50%; width:100%; height:50%; }
  .stage.compare .ref { width:100%; height:50%; border-right:0; border-bottom:1px solid var(--line); }
  .stage.compare #roomLoading { left:24px; top:calc(50% + 24px); max-width:calc(100% - 48px); }
  body[data-workbench] .rail { max-height: none; overflow: visible; border-left: 0; }
  .ff-nav { top: 0; }
}
@media (prefers-reduced-motion: reduce) { .ff-focus * { scroll-behavior: auto; } }

#reloadPractice { margin-top: 8px; min-height: 32px; }

.ff-param-search { width:100%; margin:0 0 12px; padding:10px 12px; font:14px var(--ui-font); color:var(--text); background:var(--panel-2); border:1px solid var(--line-2); border-radius:4px; }
.ff-search-hidden { display:none !important; }

.ff-destination { width:100%; min-height:36px; padding:8px; font:14px var(--ui-font); background:var(--panel-2); color:var(--text); border:1px solid var(--line-2); border-radius:4px; }