/* ============================================================================
   F51  TUTORIALS
   Tokens only, from app.css, so both themes work without a second set of
   colours. Lays out the players (16:9, never wider than the screen), the ask
   form and the list of videos asked for, and stacks it all on a phone.
   ============================================================================ */

/* --------------------------------------------------------------- players */
.f51-add{margin-left:auto;order:1}
.f51-v{margin:0 0 6px;min-width:0}
.f51-big{max-width:1040px;margin-bottom:14px}
.f51-frame{position:relative;aspect-ratio:16/9;background:var(--panel-3);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.f51-frame video{display:block;width:100%;height:100%;object-fit:contain;background:var(--panel-3)}
.f51-load{position:absolute;inset:auto 0 0 0;margin:0;padding:10px 12px;font-size:12px;color:var(--ink-2);background:var(--panel-2);border-top:1px solid var(--line)}
.f51-load[hidden]{display:none}
.f51-v figcaption{display:flex;flex-direction:column;gap:3px;padding:10px 2px 0}
.f51-cap{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.f51-t{font-size:15px;font-weight:700;line-height:1.35;color:var(--ink)}
.f51-big .f51-t{font-size:17px}
.f51-meta{font-size:12px;color:var(--ink-3)}
.f51-sum{margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2);max-width:72ch}
.f51-cap .btn{flex:none}
.f51-h{margin:18px 0 10px;font-size:14px;font-weight:700;color:var(--ink)}
.f51-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px 20px;margin-bottom:6px}

/* ------------------------------------------------------ asking for one */
.f51-askcard{max-width:640px}
.f51-askcard .btnrow{margin-top:2px}
.f51-asks{list-style:none;margin:12px 0 0;padding:0;max-width:760px}
.f51-asks li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.f51-ask-t{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink)}
.f51-ask-t small{font-size:11.5px;font-weight:400;color:var(--ink-3)}
.f51-ask-r{display:flex;align-items:center;gap:8px;flex:none}
.f51-gone-line{margin:22px 0 0;font-size:12px;color:var(--ink-3)}
.f51-gone-line .lnk{font-size:12px}
.f51-off .f51-ask-t{font-weight:500;color:var(--ink-2)}

/* --------------------------------------------------------------- drawer */
.f51-progress{margin:2px 0 0;font-size:12.5px;color:var(--info)}
.f51-progress[hidden]{display:none}
.f51-frm .f51-meta{margin:2px 0 0}

/* ---------------------------------------------------------------- phone */
@media (max-width:640px){
  .f51-grid{grid-template-columns:1fr}
  .f51-asks li{flex-direction:column;align-items:flex-start}
  .f51-ask-r{flex-wrap:wrap}
}